Integrate Baidu map in vue project

---

foreword

Baidu map is integrated in vue.

---

1. Steps to use

1. Log in to Baidu Map Development Platform

Search the Baidu map development platform in the browser , register, log in, and authenticate as a developer.

2. Create an application to obtain AK

• Create an application.

• Click Submit to submit.

• Submit to get AK.
  

---

3. Integrate the map in Vue

• Introduced in index.html

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

• In the interface that needs to use the map

<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. Final effect

---

Summarize

The integration of maps in web projects is relatively simple, and other map steps are also similar. If you haven’t done it before, it feels quite difficult. If you have integrated it, you will find that it is the same, and it is also an API call. But to be honest, Baidu It is still YYDS.