腾讯地图自定义覆盖物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 = '+ this.引用的图标+ '"/>';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 水波纹覆盖物({//点标注数据数组WaterRipplemap: 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传过去

到此结束

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！