vue-baidu-map使用

使用vue-baidu-map的步骤如下：

1. 在main.js中引入vue-baidu-map模块，并使用Vue.use()方法进行注册：

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: '此处粘贴你的百度地图ak' })

2. 在需要使用百度地图的组件中，添加<baidu-map>标签，并设置相应的属性和事件：

<baidu-map class="map" :scroll-wheel-zoom="true" :zoom="15" @ready="mapReady"></baidu-map>

3. 在组件的methods中定义mapReady方法，该方法会在地图加载完成后触发：

mapReady({ BMap, map }) {
  // 选择一个经纬度作为中心点
  this.point = new BMap.Point(this.point.longitude, this.point.latitude);
  map.centerAndZoom(this.point, 12);

  // 添加标注
  let marker = new BMap.Marker(this.point);
  map.addOverlay(marker);

  // 添加信息窗口
  let content = '<table>';
  content += '<tr><td>任务：技术服务</td></tr>';
  content += '<tr><td>地点：广东省广州市海珠区科韵南路</td></tr>';
  content += '<tr><td>时间：2021-07-15</td></tr>';
  content += '</table>';
  let infowindow = new BMap.InfoWindow(content);
  marker.openInfoWindow(infowindow);
}

以上是使用vue-baidu-map的基本步骤，其中需要注意的是，需要在main.js中引入vue-baidu-map模块，并在组件中添加<baidu-map>标签，并设置相应的属性和事件。在mapReady方法中，可以进行地图的初始化、添加标注和信息窗口等操作。引用 中的代码是一个示例，你可以根据自己的需求进行相应的修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue-baidu-map 使用](https://blog.csdn.net/qq_42074075/article/details/118764222)[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_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [vue-baidu-map使用](https://blog.csdn.net/malanjun11/article/details/109750053)[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_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [系统基于springboot框架，使用Java+vue编写，为前后端分离的微服务项目](https://download.csdn.net/download/Abelon/88250447)[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_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]