Question

我正试图从地图中删除一个特定的标记，为此，我写了下面的

  <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}}]

Answer 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。

Answer 2

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

显然setMap()是由Google Map 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);
      }
}

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

2 个答案: