Javascript/Google 地图 - 无法删除标记答案

【问题标题】：Javascript/Google Maps - Can't remove markersJavascript/Google 地图 - 无法删除标记
【发布时间】：2017-10-29 20:52:54
【问题描述】：

我正在尝试从地图中删除特定标记，为此，我写了以下内容

  <button (click)="removeDriver(id)"></button>


  removeDriver(userId) {
      //remove from the array a particular user
    this.places = this.places.filter((user) => {
      return user.userId !== userId;
    });

    let currentDriverLocation;
    //the array elements are updated now, and the markers should be plotted again
    this.places.forEach((driver) => {
      currentDriverLocation = new google.maps.LatLng(driver.currentLocation.lat, driver.currentLocation.long);
           this.marker = new google.maps.Marker({ position: currentDriverLocation, map: this.map });
    })
  }

数组用新对象更新；但是，不会删除任何标记。

this.places 数组如下所示：

    [{"userId":"khfdg999","currentLocation":{"lat":59.02922, "lng":-12.3932}},

     {"userId":"a85jfdo","currentLocation":{"lat":59.02922, "lng":-12.3932}}]

【问题讨论】：

The array is updated with the new objects; however, no markers get deleted. 那是因为您没有删除它们。过滤数组时需要删除它们。您需要致电setMap(null)
请看这篇帖子stackoverflow.com/questions/16482949/… 它有一个答案，其中描述了如何删除标记span>
您能详细说明一下吗？我曾尝试在filter() 之前致电this.marker.setMap(null)，但没有任何改变...
无论出于何种原因，除非我存储标记的数组可以从全局/模块范围访问，否则它对我不起作用。我在使用 Vue 并将标记存储在我的组件的实例属性上不起作用。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

在您的情况下，您正在复制现有标记（要删除的标记除外）。

要从地图中删除标记，您必须调用：

marker.setMap(null);

为此，您需要为您创建的每个标记及其关联的“userId”保留一个参考。可能是这样的：

removeDriver(userId) {
  //remove from the array a particular user
  this.places = this.places.filter((user) => {
    return user.userId !== userId;
  });
  //remove from the markers a particular user
  if (this.markers[userId]) {
    this.markers[userId].setMap(null);
    this.markers[userId] = null;
  };
}

addDriver(lat, lng, userId) {
    this.places.push({
      userId: userId,
      currentLocation: {lat: lat, long: lng}
    });
    this.markers[userId] = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat, lng),
      map: this.map
    });
}

而且您只有在加载驱动程序后才调用 displayMarkers。

【讨论】：

您能详细说明一下吗？在哪里打电话marker.setMap(null);？
代码似乎可以正常工作，但是它不会删除旧的绘图标记
在对console.log 执行this.markers[userId] 后抛出undefined
我对 this.places 数组和整个数据流做了假设，我们需要更多关于 englobing 对象的详细信息。
我已经编辑了我的帖子以展示 this.places 数组的外观，如果您需要更多详细信息，请告诉我

【解决方案2】：

我的问题有点不同。我有很多标记（大约 300 个标记）根据用户的过滤器从后端动态加载。每次用户更改过滤器时，我都会清除所有标记并在地图上重新绘制新标记。我使用建议的方法将所有绘制的标记填充到一个数组中（在我的情况下它是一个对象）。但是有几个标记总是删除失败。

显然setMap() 是由谷歌地图 API 异步执行的。所以它会引入竞争条件，我们清除标记然后非常快速地加载标记，并导致一些已删除的标记仍然绘制在地图上。

解决方案是将要删除的标记移动到单独的数组（deleted_marker），然后在标记上调用setMap(null)。以下是代码：

function clearMarkers() {
      // loaded_markers is a global object or array that contains all drawn markers
      var deleted_marker = [];
      for (i in loaded_markers) {
        deleted_marker.push(loaded_markers[i]);
      }
      for (var i in deleted_marker) {
        deleted_marker[i].setMap(null);
      }
}

【讨论】：