百度地图自定义标注样式

实现效果图

标注样式的自定义

// 百度地图marker样式
let icon1 = new BMap.Icon(require('../src/assets/nationMap/marker1.png'), new BMap.Size(20, 60), {
//当标注显示在地图上时，其所指向的地理位置距离图标左上角各偏移10像素和36像素
  anchor: new BMap.Size(10, 36),
  // 设置图片偏移,类似于剪切图片的功能
  imageOffset: new BMap.Size(0, 0)
})

通过new BMap.Size(20, 60)来限定标注的尺寸，这里我的标注是竖直的，我定义标注的宽度20px，高度60px，实际上我只用到来宽度来限制标注的尺寸，这里标注的宽度就是20px，由于高度60px比标注实际的高度要大，所以并不起作用

这里需要注意的地方就是
require('../src/assets/nationMap/marker1.png')
图片在Vue中需要用到require来获取

自己对于imageOffset: new BMap.Size(0, 0)的理解，当你的图片是一个大图的时候，意思就是说当你使用含有多个标注点样式的大图时，但是我们需要的只有一个标注点样式，这个时候我们就要用到剪切，imageOffset: new BMap.Size(100, 100)确定了剪切点的左上方的坐标，比如imageOffset: new BMap.Size(100, 100)对应于图片中就是margin-left:100px和margin-top:100px

添加标注

// 添加单个标注
// icon: this.GLOBAL.icon1，这里面的this.GLOBAL.icon1就是上面自己定义的标注样式
 markerFun: function (map, point) {
      let marker = new BMap.Marker(point, {
        icon: this.GLOBAL.icon1
      })
      map.addOverlay(marker)
    },
    // 添加多个标注
    multMarker: function () {
      for (let i = 0; i < this.siteList.length; i++) {
        // 创建坐标点
        let points = new BMap.Point(this.siteList[i].position.lng, this.siteList[i].position.lat)
        this.markerFun(this.GLOBAL.map, points)
      }
    }