JavaScript-在谷歌地图上动态移动多个标记，不重复

Question

我使用下面的代码在谷歌地图上显示多个标记，其中finalArray2包含多个纬度和经度。CCD_ 2也动态变化以显示多个标记的移动。

for (let key in finalArray2) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(finalArray2[key][0], finalArray2[key][1]),
map: map,
marker_id: key
});
}

上面的代码显示了重复的标记和我正在尝试使用删除标记

marker.setMap(null)

但问题是它正在删除所有的标记。

我不知道该把这个标记删除代码放在哪里。

Answer 1

我的建议是，当创建标记时，将其推到一个新的数组中，并将位置创建为指针前的对象。我还可以建议您将数据放在对象数组中吗。示例：

markerData = [
{
key: "key",
position {
lat: LAT,
lng: LNG 
}
}
]
let markers = [];
markerData.foreach(mark) {
marker = new google.maps.Marker({
position: mark.position,
map: map,
marker_id: mark.key
});
markers.push(marker);
}

然后有一个单独的函数，它接收标记对象并将其映射设置为null。甚至可能有两个单独的功能，一个用于删除单个标记，另一个用于清除所有标记。单一：

function removeMarker(marker) {
marker.setMap(null)
}

全部：

function removeAllMarkers() {
markers.foreach(marker => {
removeMarker(marker);
});
}

Answer 2

这是我的解决方案：在谷歌地图上动态移动多个标记，而不重复标记

var index=0;
for (let key in finalArray2) {
if(marker[index] != null){
marker[index]=setMap(null);
}
marker[index] = new google.maps.Marker({
position: new google.maps.LatLng(finalArray2[key][0], finalArray2[key][1]),
map: map,
marker_id: key
});
index++;
}