百度地图多点情况下,点击标注点更换图标

做大屏可视化开发遇到的一个问题,在网上也查了资料,借鉴了一下别人的思路

需求:百度地图上有多个标注点,只有点击的点会变,其他保持不变.

	function setPointData(data) {
		//data是后端传过来每个点位的数据
		//false--不变/true--变色
		let pointColorFlag = false;
		if (data.content.livestockEnterpriseHistoryList != "" && data.content.livestockEnterpriseHistoryList != null) {
			jQuery.each(data.content.livestockEnterpriseHistoryList, function(i, item) {
				//根据经纬度创建点
				let pt = new BMap.Point(item.longitude, item.latitude);
				//标注点默认所用的图标
				let myIcon = new BMap.Icon("images/livestock/icon-blue.png", new BMap.Size(50, 70));
				//选中后标注点需要展示的图标
				let newMyIcon = new BMap.Icon("images/livestock/icon-red.png", new BMap.Size(50, 70));
				let marker = new BMap.Marker(pt, {
					icon : myIcon
				});
				// 创建标注点
				map.addOverlay(marker);
				marker.addEventListener("click", function(event) {
					console.log(pointColorFlag);
					// 绑定一个变量，如果为true,把之前加的图标移除
					if (pointColorFlag) {
						map.removeOverlay(newMarker);
						//移除后需要将标识状态改变
						pointColorFlag = false
					}
					// 在相同位置新增一个newMarker，这样相当于覆盖掉原有的图标
					let point = new BMap.Point(event.target.point.lng, event.target.point.lat)
					newMarker = new BMap.Marker(point, {
						icon : newMyIcon
					});
					map.addOverlay(newMarker);
					pointColorFlag = true
				});
			});
		}
	}

感谢
岸芷汀兰§小慧
文章的思路