vue引入百度地图实现轨迹绘制

引入

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);


  },
  }