腾讯地图自定义覆盖物vue

1.在vue中使用腾讯地图并添加水波纹覆盖物

2.首先需要创建覆盖物

// 自定义水波纹覆盖物
export default class 水波纹覆盖物 extends TMap.DOMOverlay {
    constructor(options) {
        super(options);
    }

    // 初始化：获取配置参数
    onInit({ position, 引用的图标, id, } = {}) {
        Object.assign(this, { position, 引用的图标, id, });
    }

    // 创建DOM元素，返回一个Element，使用this.dom可以获取到这个元素
    createDOM() {
        this.onMouseEnter = function (e) {
            this.emit('mouseenter', e.target.firstChild);
        }.bind(this);
        this.onMouseLeave = function (e) {
            this.emit('mouseleave', e.target.firstChild);
        }.bind(this);
        this.onClick = function (e) {
            this.emit('click', e.target.firstChild);
        }.bind(this);
        let mydom = document.createElement('div')
        mydom.setAttribute("id", "grad2")
        mydom.innerHTML = '<div class="biggest"><div class="middle"><img src="' + this.引用的图标+ '"/></div></div>';
        mydom.style.cssText = ['position: absolute;', 'top:  0px;', 'left: 0px;'].join('');
        mydom.addEventListener('click', this.onClick);
        mydom.addEventListener('mouseenter', this.onMouseEnter);
        mydom.addEventListener('mouseleave', this.onMouseLeave);
        return mydom;
    }

    // 更新DOM元素，在地图移动/缩放后执行
    updateDOM() {
        if (!this.map) {
            return;
        }
        // 经纬度坐标转容器像素坐标
        let pixel = this.map.projectToContainer(this.position);
        // 使饼图中心点对齐经纬度坐标点
        let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
        let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
        this.dom.style.transform = `translate(${left}, ${top})`;
    }

    // 销毁时
    onDestroy() {
        if (this.onClick) {
            this.dom.removeEventListener(this.onClick);
        }
        if (this.onMouseLeave) {
            this.dom.removeEventListener(this.onMouseLeave);
        }
        if (this.onMouseEnter) {
            this.dom.removeEventListener(this.onMouseEnter);
        }
    }
}
           

覆盖物要继承腾讯的类， 初始化的时候把我们用到的参数全部传进来

然后创建dom，创建dom的时候需要把鼠标事件创建出来，然后监听鼠标事件，实现对mark操作时候的响应，还需要把更新方法实现出来，通过transform实现坐标定位，销毁时，要把鼠标事件也销毁掉

3， 实现了自定义mark标记，我们引用的时候

要创建一个mark的集合来存储所有的自定义覆盖物，

MarkList: []

var param = new 水波纹覆盖物({
          //点标注数据数组WaterRipple
          map: map,
          position: new TMap.LatLng(lat, lng),
          引用的图标: 引用的图标,
          id: id,
        })
        this.MarkList.push(param);
      }
           

这样就可以吧自定义标记打到地图中去

但是我们还需要删除标记

if (this.MarkList) {
        this.MarkList.forEach(mark => {
          mark.setMap(null);
        })
      }
           

或者我们也可以根据我们自定义的id作为一个判断条件根据id删除

同时我们可以给自定义标记增加信息框，同时给标记增加各种鼠标事件

mark.on('click', () => {
         
        });
        var map = document.getElementById("china-map");
        mark.on('mouseenter', () => {
          map.style.cursor = "pointer";
        });
        mark.on('mouseleave', () => {
          map.style.cursor = this.cursor;
        });
           

给自定义标记添加信息框和默认的标记差不多创建一个信息框，并将信息通过mark传过去

到此结束