### 地图

        在天地图中，无法直接将Marker点，变成html标签，所以就需要自定义覆盖物去处理html标签

如果对于开发任务来说，Marker对于地图来说是必不可少的，但是有时候又需要一些自定义的html标签。

        因此这个时候，就需要自定义处理。

例如：坐标系为（EPSG:4326）

<div id="map" style="width:200px;height:200px;"></div>

const data = [

  { -- -->

    name: '郑州市',

    lat: 34.757975,

    lng: 113.665412,

    value: 300,

    color: '#fff',

    background: 'rgb(126, 0, 35)'

  },

  {

    name: '开封市',

    lat: 34.797049,

    lng: 114.341447,

    value: 50,

     color: '#fff',

    background: 'rgb(255, 0, 0)'

  },

  {

    name: '洛阳市',

    lat: 34.663041,

    lng: 112.434468,

    value: 90,

    color: '#303133',

    background: 'rgb(255, 255, 0)'

  }

];

 

const map:any  = ref()

map.value = new window.T.Map('map', {

    projection: 'EPSG:4326'

  });

data.map((item: any) => {

    var definedOverlay = window.T.Overlay.extend({

      initialize: function (lnglat: any, options: any) {

        this.lnglat = lnglat;

        this.setOptions(options);

      },

      onAdd: function (map: any) {

        this.map = map;

        var div = (this._div = document.createElement('div'));

        div.style.position = 'absolute';

        div.style.backgroundColor = item.color;

        div.style.borderRadius = '50%';

        div.style.color = 'white';

        div.style.width = '20px';

        div.style.height = '20px';

        div.style.whiteSpace = 'nowrap';

        div.style.userSelect = 'none';

        div.style.fontSize = '12px';

        div.style.zIndex = '999';

        div.style.cursor = 'pointer';

        var that = this;

        //点击事件

        div.onclick = function () {

          var pos = that.map.lngLatToLayerPoint(that.lnglat);

          posLocation.x = pos.x - 200;

          posLocation.y = pos.y + 20;

          popShow.value = true;

          console.log('9999', pos);

        };

        map.getPanes().overlayPane.appendChild(this._div);

        this.update(this.lnglat);

      },

      onRemove: function () {

        var parent = this.div.parentNode;

        if (parent) {

          parent.removeChild(this.div);

          this.map = null;

          this.div = null;

        }

      },

      setLnglat: function (lnglat: any) {

        this.lnglat = lnglat;

        this.update();

      },

      getLnglat: function () {

        return this.lnglat;

      },

      setPos: function (pos: any) {

        this.lnglat = this.map.layerPointToLngLat(pos);

        this.update();

      },

      /**

       * 更新位置

       */

      update: function () {

        var pos = this.map.lngLatToLayerPoint(this.lnglat);

        this._div.style.top = pos.y + 'px';

        this._div.style.left = pos.x + 'px';

      }

    });

    var point = new window.T.LngLat(item.lng, item.lat);

    var pdefinedOverlay = new definedOverlay(point, {});

    map.value.addOverLay(pdefinedOverlay);

  });