实现效果图
标注样式的自定义
// 百度地图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)}}
