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

Question

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

    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)

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

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

标签： javascriptgoogle-mapsmarker

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

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

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

全部：

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