JavaScript-在Google地图上动态移动多个标记而无需重复

时间:2018-07-11 07:59:07

标签: javascript google-maps marker

我正在使用以下代码在Google地图上显示多个标记,其中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)

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

我不知道将标记删除代码放在何处。

2 个答案:

答案 0 :(得分:0)

我建议的是在创建标记时将其推入新数组以及将位置创建为对象之前的对象。可能我还建议您也将数据放在对象数组中。示例:

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

答案 1 :(得分:0)

这是我的解决方案:在Google地图上动态移动多个标记而无需重复标记

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++;

    }