vue3中使用百度地图BMAP

在Vue3中使用百度地图，可以按照以下步骤进行：

1. 在项目中引入百度地图的API文件。可以在public/index.html文件中添加以下代码：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

其中，密钥可以在百度地图开放平台申请。

  

2. 在需要使用地图的组件中引入BMap对象和BMapGL对象，并创建地图。例如：

// 引入BMap和BMapGL对象
import BMap from 'BMap'
import BMapGL from 'BMapGL'

export default {
  mounted() {
    // 创建地图
    const map = new BMap.Map("map-container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    map.enableScrollWheelZoom(true);
  }
}

3. 可以在组件中添加地图相关的事件监听，例如：

mounted() {
    const map = new BMap.Map("map-container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    map.enableScrollWheelZoom(true);

    // 添加地图点击事件监听
    map.addEventListener("click", (e) => {
      console.log(`您点击的位置：${e.point.lng},${e.point.lat}`);
    });
}

以上就是在Vue3中使用百度地图的基本步骤。需要注意的是，由于Vue3使用了Composition API，可能需要在setup函数中引入地图相关的对象，以便在组件中使用。例如：

<script>
import { ref, onMounted } from 'vue'
import BMap from 'BMap'
import BMapGL from 'BMapGL'

export default {
  setup() {
    const map = ref(null)

    onMounted(() => {
      // 创建地图
      const bmap = new BMap.Map(map.value)
      bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
      bmap.enableScrollWheelZoom(true)

      // 添加地图点击事件监听
      bmap.addEventListener("click", (e) => {
        console.log(`您点击的位置：${e.point.lng},${e.point.lat}`)
      })
    })

    return {
      map
    }
  }
}
</script>

<template>
  <div ref="map"></div>
</template>

在以上示例中，使用了Vue3的ref和onMounted函数来创建地图，并将地图对象添加到模板中的div元素中。