天地图标记点

原创已于 2024-05-17 16:43:49 修改 · 406 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #javascript

于 2024-05-17 16:41:46 首次发布

<div id="map" style="width: 100%; height: 100%"></div>

初始化地图

this.map = new T.Map("map");
this.map.centerAndZoom(new T.LngLat(116.3912757, 39.906217), 11);


//接口返回数据为resourceList
 if (this.maker) {
        this.maker.forEach((res) => {
          this.map.removeLayer(res);
        });
      }
      // 显示标记。
      if (resourceList?.devices) {
        this.maker = []; // 重置maker数组
        resourceList.devices.forEach((item) => {
          if (item.longitudeLatitude) {
            let marker2;
            marker2 = this.createMarker(item);
            const markerInfoWin = this.createInfoWindow(item);
            marker2.addEventListener("click", function () {
              marker2.openInfoWindow(markerInfoWin);
            });
            this.map.addOverLay(marker2);
            this.maker.push(marker2);
          }
       });
 }

创建标记

createMarker(item, index) {
      return new T.Marker(
        new T.LngLat(
          item.longitudeLatitude.split(",")[0],
          item.longitudeLatitude.split(",")[1]
        ),
        {
          icon: new T.Icon({
            iconUrl: require("@/assets/resource/1.png"),
            iconSize: new T.Point(20, 20),
          }),
        }
     );
},

窗口信息

createInfoWindow(item) {
      return new T.InfoWindow(item.orgName + "" + item.deviceName, {
        autoPan: true,
        minWidth: 100,
      });
},