引入
cnpm i --save vue-baidu-map
main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'U4Bn9fW4tEtgEOtQ29cTpIBm47Ey4LCX'//百度地图密钥(仅限测试)
});
代码实现
<baidu-map class="map" :scroll-wheel-zoom="true" :center="map.center" :zoom="map.zoom" @ready="ready">
<bm-polyline :path="lineList" stroke-color="red" :stroke-opacity="0.5" :stroke-weight="2"></bm-polyline>
</baidu-map>
//引入图片
import qidian from "../../../assets/images/qidian.png";
import zhong from "../../../assets/images/zhong.png";
data(){
return{
map: {
center: { lng: 113.763924, lat: 22.938634 },
zoom: 18,
show: true,
dragging: true
},
lineList:[
{ lng: 113.763924, lat: 22.938634 },
{ lng: 113.759621, lat: 22.933625 },
{ lng: 113.76654, lat: 22.934174 },
{ lng: 113.766558, lat: 22.932916 },
{ lng: 113.766558, lat: 22.932916 },
{ lng: 113.768745, lat: 22.93173 },
{ lng: 113.76945, lat: 22.930731 },
{ lng: 113.772022, lat: 22.93014 },
{ lng: 108.952789, lat: 34.348938 },
],
}
}
methods: {
//轨迹配置
ready({ BMap, map }){
//起点标注
var point = new BMap.Point(113.763924, 22.938634)
var myIcon = new BMap.Icon(qidian, new BMap.Size(48, 48))
var marker = new BMap.Marker(point, { icon: myIcon }) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
//终点标注
var point2 = new BMap.Point(108.952789,34.348938)
var myIcon2 = new BMap.Icon(zhong, new BMap.Size(48, 48))
var marker2 = new BMap.Marker(point2, { icon: myIcon2 }) // 创建标注
map.addOverlay(marker2) // 将标注添加到地图中
//设置轨迹样式
var array=[];
this.lineList.forEach(Element=>{
array.push(new BMap.Point(Element.lng, Element.lat))
})
var polyline = new BMap.Polyline(array,
{strokeColor:"red", strokeWeight:5, strokeOpacity:0.5});
map.addOverlay(polyline);
},
}