vue项目中集成百度地图

---

前言

vue中集成百度地图。

---

一、使用步骤

1.登录百度地图开发平台

浏览器中搜索百度地图开发平台，注册，登录，并且认证成为开发者。

2.创建应用获取AK

• 创建应用。

• 点击提交提交。

• 提交完成得到AK。
  

---

3.在Vue中集成地图

• 在index.html中引入

<script type="text/javascript"
 		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=输入自己刚刚创建的AK"></script>

• 在需要使用地图的界面

<div class="baidu" ref="mapRef"></div>
<script setup>
  import { onMounted, ref } from 'vue'

  const mapRef = ref()

  onMounted(() => {
    setTimeout(() => {
      const map = new BMapGL.Map(mapRef.value) // 创建地图实例,需要一个容器
      const point = new BMapGL.Point(props.position.longitude, props.position.latitude) // 创建点坐标  经度/纬度
      const marker = new BMapGL.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
    }, 100)
  })
</script>
<style lang="less" scoped>
.baidu {
  height: 300px;
}
</style>

4.最终效果

---

总结

web项目中地图的集成是比较简单的,其他的地图步骤也是类的的，没做过的话感觉挺难的，集成过的话你就会发现也就那样，也是API的调用，不过说实话，百度还是YYDS的。