天地图 自定义覆盖物（能用Marker，最好还是用）
### 地图
在天地图中，无法直接将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);
});
原文地址：https://blog.csdn.net/weixin_62364503/article/details/140692364
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！