项目使用vue做的,直接上代码
//引入的图标
import iconCar from "../assets/icon_yongyou_green.gif";
import iconCars from "../assets/icon_yongyou_red.gif";
import iconclick from "../assets/yellow.gif";
import underline from "../assets/underline.png";
baiduMap() {
var map = new BMap.Map("allmap");
var point = new BMap.Point(113.636523, 34.754674);
map.setCurrentCity("郑州");
map.centerAndZoom(point, 12);
map.enableScrollWheelZoom(true);
window.map = map;
//个性化地图设置
map.setMapStyleV2({
styleId: "96a0c585e08a7bf069d67c32a7cd6f6f",
});
//拿到数据进行循环
this.list1.forEach((item, i) => {
let obj = {
lon: item.v_lon,
lat: item.v_lat,
};
this.points.push(obj);
//根据条件筛选进行显示自定义标注点的图标
if (item.timeOut == "1") {
var youyongImg = underline;
} else {
if (item.v_if_alarm != 2) {
var youyongImg = iconCar;
} else {
var youyongImg = iconCars;
}
}
var myIcon = new BMap.Icon(youyongImg, new BMap.Size(30, 22));
var point = new BMap.Point(this.points[i].lon, this.points[i].lat);
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
//给标注点添加数字序号
var label = new BMap.Label(item.v_serial_number, {
offset: new BMap.Size(5, -10),
});
marker.setLabel(label);
label.setStyle({
border: "0",
color: "#ffffff",
cursor: "pointer",
background: "none",
fontsize: 18,
});
map.addOverlay(marker); // 将标注添加到地图中
//给标注点注册点击事件
marker.addEventListener("click", function () {
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length; i++) {
if (allOverlay[i].getTitle() == "监测点") {
map.removeOverlay(allOverlay[i]);
break;
}
}
var myIcon = new BMap.Icon(iconclick, new BMap.Size(32, 25));
var markers = new BMap.Marker(point, { icon: myIcon });
markers.setTitle("监测点");
map.addOverlay(markers);
});
});
}