Vue3使用百度地图简单易懂

1、去官网百度地图开放平台申请密钥：https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey

image.png

image.png

image.png

2、在public/index.html中引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥ak"></script>

3、渲染地图

<!-- vue 3 引入百度api -->
<template>
  <div id="allmap"></div>
</template>
 
<script>
import { defineComponent, nextTick, onMounted } from "vue";
export default defineComponent({
  setup() {
    onMounted(() => {
      nextTick(() => {
        initMap();
      });
    });
    const initMap = () => {
      let Bmap = window.BMap;
      let map = new Bmap.Map("allmap");
      map.centerAndZoom(new Bmap.Point(104.04263635868074, 30.556100647961866),11);
    };
    return {} ;
  },
});

</script>
<style  scoped>
  #allmap {
    width: 100%;
    height: 400px;
  }
</style>

提示：如有错误请与我联系谢谢！

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容