Vue项目使用百度地图经验总结

一、 引用

npm install vue-baidu-map --save

index.html

<script src='http://api.map.baidu.com/api?v=3.0&ak='></script>

初始化

<div class="map-container" ref="bmap" id="bmap"></div>

initBMap () {
    this.bmap = new BMap.Map("bmap", {
         mapType: BMAP_SATELLITE_MAP
     });
     //设置中心点和缩放比例
     this.bmap.centerAndZoom(new BMap.Point(121.407142, 37.602942), 17);
     // 开启鼠标滚轮缩放
     this.bmap.enableScrollWheelZoom();
 },

二、折线增加方向箭头

var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
   scale: 0.5,
    strokeColor: '#fff',
    strokeWeight: '2'
});
var icons = new BMap.IconSequence(sy, '10', '30');
let polyline = new BMap.Polyline(points, {
    strokeColor: '#28FF28',
    strokeWeight: 6,
    strokeOpacity: 1,
    icons: [icons]
});
this.bmap.addOverlay(polyline);

三、地图初始化时折线不显示

猜测原因：地图为加载完全即开始绘制折线
解决方案：1.延迟绘制 2.地图加载完成后绘制折线（没找到判断地图是否加载完成的方法）

setTimeout(() => {
    this.bmap.addOverlay(polyline);
},700);

四、infowindow上添加自定义点击事件

参考：https://blog.csdn.net/qq_41588568/article/details/91552752

// 生成信息窗体
 createInfowindow(o, point) {
     this.baiduWindow = new BMap.InfoWindow(this.createInfoWindowCode(o, point), {
         width: 0,
         height: 0
     });
     let _this = this;
     //监听打开弹窗事件，打开弹窗时为按钮绑定点击事件
     this.baiduWindow.addEventListener("open",function(){
         document.getElementById("operationBtn").onclick = function(){
             _this.getDevicePath();
         }

     })
     return this.baiduWindow;
 },
  // 生成信息窗体HTML代码
 createInfoWindowCode(o, p) {
     var content = '';
     content += '<div id="operationBtn" style="text-align:right;"><a style="text-decoration:none;"> >>>查询轨迹</a></div>';
     return content;
 },

五、添加文字标签、标点

// 添加文字标签
let point = new BMap.Point(item.longitude, item.latitude);
let offset = new BMap.Size(-22, -50);
let label = new BMap.Label('label名称', { position: point, offset: offset });
  label.setStyle({
      borderColor: '#ff0000',
      backgroundColor: '#ff0000',
      color: '#fff'
  });
  this.bmap.addOverlay(label);

//添加标点
let point = new BMap.Point(item.longitude, item.latitude);
let marker = new BMap.Marker(point, { icon: icon });
marker.disableDragging();//关闭标注拖拽功能
this.bmap.addOverlay(marker);