Angular中点击按钮移除Google Map所有标记的实现问题

嘿，我来帮你搞定移除Google Map标记的问题～先看看你现有代码里的小疏漏，再给你补全移除方法：

你当前的addMarkersToMap有两处关键问题需要调整：

• 把myMarker(this.map)改成myMarker.setMap(this.map)，这才是Google Maps API正确的将标记绑定到地图的方式
• 你现在往gmarkers里存的是原始的marker数据对象，而不是创建出来的google.maps.Marker实例——只有存了标记实例，后续才能调用它的API方法来移除，所以要改成this.gmarkers.push(myMarker)

修正后的完整添加方法：

addMarkersToMap(markers) {
  for(let marker of markers) {
    var position = new google.maps.LatLng(marker.latitude, marker.longitude);
    var myMarker = new google.maps.Marker({ position: position, title: marker.name });
    myMarker.setMap(this.map); // 修正：用setMap将标记添加到地图
    this.gmarkers.push(myMarker); // 修正：存入Marker实例而非原始数据对象
  }
}

现在可以完善你的removeMarkers方法，遍历gmarkers数组里的每个标记实例，调用setMap(null)就能把标记从地图上移除，之后清空数组还能避免重复处理旧标记：

写法一：for循环遍历 #

removeMarkers(){
  if (this.gmarkers && this.gmarkers.length > 0) {
    // 逐个移除地图上的标记
    for (let i = 0; i < this.gmarkers.length; i++) {
      this.gmarkers[i].setMap(null);
    }
    // 清空数组，释放内存并重置状态
    this.gmarkers = [];
  }
}

写法二：forEach简化版 #

如果你喜欢更简洁的代码，也可以用forEach遍历：

removeMarkers(){
  if (this.gmarkers) {
    this.gmarkers.forEach(marker => {
      marker.setMap(null);
    });
    this.gmarkers = [];
  }
}

Google Maps的标记不会自动销毁，调用setMap(null)只是把它从地图视图中隐藏，清空数组是为了释放内存，同时确保下次添加新标记时不会和旧实例混淆。

内容的提问来源于stack exchange，提问作者Bloger