vue-baidu-map在vue3中使用

在Vue3中使用vue-baidu-map的方法如下：
1. 首先，安装vue-baidu-map依赖包。可以通过npm或者yarn进行安装。
2. 在vue组件中引入BMap，并在mounted钩子函数中创建地图实例。注意，在Vue3中，需要使用import语法引入BMap，例如：import BMap from 'BMap'。
3. 在mounted钩子函数中，使用BMap创建地图实例，并设置地图的中心点和缩放级别。
4. 添加地图标注：使用BMap.Marker创建标注实例，并将其添加到地图上。
5. 可选地，添加信息窗口：使用BMap.InfoWindow创建信息窗口实例，并使用map.openInfoWindow()方法开启信息窗口。
6. 可选地，为标注添加点击事件，当点击标注时开启信息窗口。

以下是一个示例代码：

<template>
  <div class="map">
    <div id="map"></div>
  </div>
</template>

<script>
import BMap from 'BMap'

export default {
  mounted() {
    const map = new BMap.Map('map')
    const point = new BMap.Point(118.750801, 31.944156)
    map.centerAndZoom(point, 15)

    const marker = new BMap.Marker(point)
    map.addOverlay(marker)

    const opts = { width: 100, height: 50 }
    const infoWindow = new BMap.InfoWindow('这里显示地址详细信息', opts)

    marker.addEventListener('click', function() {
      map.openInfoWindow(infoWindow, point)
    })
  }
}
</script>

以上代码展示了在Vue3中使用vue-baidu-map的基本流程。你需要根据自己的需求，在上述基础上进行进一步的定制和添加功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue3 使用百度地图，踩坑日历](https://blog.csdn.net/hjg1224/article/details/121241972)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue-baidu-map离线百度地图，并附带jar包免费下载百度瓦片数据](https://download.csdn.net/download/HZC961850356/82034496)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]