天地图添加marker自定义图标和文字备注

本文主要是介绍天地图添加marker自定义图标和文字备注，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、添加图标和文字

// this.pointList是点位的集合
for (let index = 0; index < this.pointList.length; index++) {let point = '';let icon = '';const item = this.pointList[index];// 1.创建坐标，通常是调取接口获得经纬度point = new T.LngLat(item?.lon, item?.lat);// 2.创建覆盖使用的图标icon = new T.Icon({iconUrl: ‘图标路径，自行引入定义’,iconSize: new T.Point(36, 36), // 图标可视区域的大小iconAnchor: new T.Point(30, 30), // 图标的定位锚点});// 3. 创建在该坐标上的一个图像标注实例let marker = new T.Marker(point, { icon });marker.id = item.id; // 添加marker的id// 4.将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次this.tdtMap.addOverLay(marker);// 添加文字let label = new T.Label({text: `<b>${item.company}<b>`,position: marker.getLngLat(),offset: new T.Point(-10, -10)});label.setZindex(999)this.tdtMap.addOverLay(label);// 鼠标点击marker弹出自定义的信息窗体marker.addEventListener('click', e => {// openInfo是弹框内容，根据业务自行定义this.openInfo(item, e.target);});}

2、解决文字被图标覆盖问题

在css样式中修改z-index即可

.tdt-overlay-pane {z-index: 620;
}

同时想修改文字的样式也可以这样参考

.tdt-label {line-height: 20px;padding: 0 4px;
}

也可以参考官方文档：

3、效果图如下

这篇关于天地图添加marker自定义图标和文字备注的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---