1.安装地图
npm install vue-baidu-map
2.在main中引入
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap,{ak:'此处粘贴你的百度地图ak'})
3.简单使用百度地图
<baidu-map class="map" :scroll-wheel-zoom="true" :zoom="15" @ready="mapReady"></baidu-map>
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);
//把信息添加到地图上
map.addOverlay(marker);
let content = '<table>';
content = content + '<tr><td> 任务:技术服务</td></tr>';
content = content + '<tr><td> 地点:广东省广州市海珠区科韵南路</td></tr>';
content = content + '<tr><td> 时间:2021-07-15</td></tr>';
content += '</table>';
let infowindow = new BMap.InfoWindow(content);
marker.openInfoWindow(infowindow);
},