天地图自定义覆盖物

起因：手机端项目需求是需要一个测量工具。当然天地图提供了。 new T.PolygonTool(map, config); 标注工具。 问题就来了. 1.手机端界面小容易点错又无法调整。2.有bug在点击时有概率无法读到点，导致整个页面卡死。 这tm忍不了啊。

想解决先爬文档

示例里自定义覆盖物有用。 先声明一个T.Overlay.extend() 对象 里面有初始化，更为你位置等一些方法。重点看 onAdd: 构建方法。里面是一些dom操作。 完全可以绑定触摸事件 获取触摸点在屏幕的位置 然后通过containerPointToLngLat(pixel:Point) 获取地图上的坐标点。

上代码

` positionNews = T.Overlay.extend({ initialize: function (lnglat, addressInfo, options) { this.lnglat = lnglat; this.addressInfo = addressInfo; this.setOptions(options); }, onAdd: function (map) { this.map = map; var div = this._div = document.createElement("div"); div.style.position = "absolute"; div.style.height = "30px"; div.style.width = "30px"; div.style.zIndex="501";

        var address = this._address = document.createElement("div");
        address.style.background="#fff";
        address.style.borderRadius="8px";
        address.style.position = "absolute";
        address.style.transform = 'translate(-50%,-104%)'	
        // address.style.top = "-105px"
        address.style.left = "15px"
        // address.style.height = "100px"
        address.style.width = "250px"
        address.style.padding = "8px 0px"
        

        var title = this._title = document.createElement("div");
        title.appendChild(document.createTextNode('当前位置'));
        title.style.fontSize = "18px"
        title.style.padding = "0px 10px 0px 10px"
        address.appendChild(title);

        var lng = this._lng = document.createElement("div");
        lng.appendChild(document.createTextNode(`经度：${this.lnglat.lng}`));
        lng.style.fontSize = "14px"
        lng.style.padding = "0px 10px"
        address.appendChild(lng);

        var lat = this._lat = document.createElement("div");
        lat.appendChild(document.createTextNode(`纬度：${this.lnglat.lat}`));
        lat.style.fontSize = "14px"
        lat.style.padding = "0px 10px"
        address.appendChild(lat);

        var addressName = this._addressName = document.createElement("div");
        addressName.appendChild(document.createTextNode(`位置：${this.addressInfo}`));
        addressName.style.fontSize = "14px"
        addressName.style.padding = "0px 10px"

        address.appendChild(addressName);
      

        div.appendChild(address);

        var icon = this._icon = document.createElement("img");
        icon.src =  require('./images/dingwei.png')  
        icon.style.height = "30px";
        icon.style.width = "30px";
        div.appendChild(icon);

        map.getPanes().overlayPane.appendChild(this._div);
        this.update(this.lnglat);
        let that = this;
        div.ontouchstart =function(e){
          map.disableDrag()	
        }
        div.ontouchmove = function( e ){
           let point = map.containerPointToLngLat( { y:e.changedTouches[0].clientY, x: e.changedTouches[0].clientX  } )
           that.setLnglat( point )
           sign.stack[ that.serialNumber ] =  { lng: point.lng , lat: point.lat }
          //  if( that.serialNumber != 0 ){
          //  }
          if( sign.type == 2 ){
           setDistance( that.serialNumber  )
          }
          totalDistance()
          if( sign.type == 3 || sign.type == 4 ){ totalArea() }
          drawLine()
        }

        div.ontouchend = function(){
          map.enableDrag()	
        }
        div.touchcancel = function(){
          map.enableDrag()	
        }

    },

    onRemove: function () {
        var parent = this._div.parentNode;
        if (parent) {
            parent.removeChild(this._div);
            this.map = null;
            this._div = null;
        }
    }, 
    setRemove:function(){
    },


    setLnglat: function (lnglat , addressInfo) {
        this.addressInfo = addressInfo;
        this.lnglat = lnglat;
        this._lng.innerHTML= `经度：${lnglat.lng}`;
        this._lat.innerHTML= `纬度：${lnglat.lat}`;
        this._addressName.innerHTML = `位置：${addressInfo}`;
        this.update();
    },
    getLnglat: function () {
        return this.lnglat;
    },
    setPos: function (pos) {
        this.lnglat = this.map.layerPointToLngLat(pos);
        this.update();
    },
    /**
     * 更新位置
     */
    update: function () {
        var pos = this.map.lngLatToLayerPoint(this.lnglat);
        this._div.style.top = ( pos.y - 30) + "px";
        this._div.style.left = (pos.x - 15) + "px";
    }
});`