騰訊地圖自定義覆寫物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傳過去

到此結束