天地图添加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、效果图如下