<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,
});
},