如何使用 ngMaps 刷新/删除 Google 地图上的标记答案

【问题标题】：How can I refresh/delete markers on Google maps using ngMaps如何使用 ngMaps 刷新/删除 Google 地图上的标记
【发布时间】：2018-03-25 17:03:44
【问题描述】：

我正在使用 markerclusterer 库和以下代码创建和聚类我的标记：

    function populateMapLocationData(locations) {

        NgMap.getMap({id:'map'}).then(function(map) {
            $scope.assetMap = map;
            $scope.initMarkerClusterer(locations);
        });

    };

    $scope.initMarkerClusterer = function(locations) {

        $scope.bounds = new google.maps.LatLngBounds();
        var markers = $scope.createMarker(locations);

        var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
        var markerCluster = new MarkerClusterer($scope.assetMap, markers, mcOptions);

        $scope.assetMap.fitBounds($scope.bounds);
        $scope.assetMap.panToBounds($scope.bounds);

    };

    $scope.createMarker = function(location) {
        var latLng = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lang));
        $scope.bounds.extend(latLng);
        var marker = new google.maps.Marker({position: latLng, title: asset.name});
        google.maps.event.addListener(marker, 'click', function() {

            var infowindow = new google.maps.InfoWindow();
            var center = new google.maps.LatLng( parseFloat(asset.lat), parseFloat(asset.lang) );

            infowindow.setContent("content");
            infowindow.setPosition(center);
            infowindow.open($scope.assetMap);

            google.maps.event.addListener($scope.assetMap, 'click', function(event) {
                infowindow.close();
            });

        });

        return marker;
    };

这在第一次迭代时运行良好。

再次使用新位置点击 populateMapLocationData 函数，边界发生变化，地图居中并缩放到新标记的新位置，所以我认为它可以正常工作，但所有以前的标记仍然存在。

我想要实现的是，当我使用一组新位置调用 populateMapLocationData 时，清除现有标记并使用新标记更新地图。

我已经看到markers[key].setMap(null);可以使用但我没有任何成功。

感谢任何建议，谢谢

【问题讨论】：

解决方案在哪里实施？
我主要参考了以下文档：ngmap.github.io/#/!marker-remove.html，但没有使用聚类库删除标记/标记的示例。而且我正在以不同的方式构建我的标记。我正在使用这条线var markerCluster = new MarkerClusterer($scope.assetMap, markers, mcOptions); 来生成它们。 $scope.assetMap.markers[key].setMap(null); 返回错误：未定义标记。我在地图完成初始化后使用它作为测试来删除任何东西。你以前管理过吗？

标签： angularjs google-maps google-maps-api-3 ng-map

【解决方案1】：

实际上，如果您使用 Google 的原始 markerclusterer.js，要删除标记，您只需要使用它的 MarkerClusterer.prototype.removeMarker 函数并删除一组标记，您只需使用它的 MarkerClusterer.prototype.removeMarkers 幸运的是，ngMaps 的 markerclusterer.js 是只是原始的包装。更多详情请参阅 Google 的 documentation

例如：

vm.dynMarkers = [ {marker1}, {marker2}, ...] // your marker array
vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {}); // creater your marker cluster
vm.markerClusterer.removeMarkers(vm.dynMarkers); // remove all markers

我制作了一个 plunker 示例供您学习，其中我使用 ngMaps 示例库作为基础，以便您更轻松（确保使用您自己的 API 密钥）：https://plnkr.co/edit/RZNc2KLdO8qmW0o2Kimq?p=preview

这也是嵌入的代码：

var app = angular.module('myApp', ['ngMap']);

app.controller('mapController', function($http, $interval, NgMap) {
  var vm = this;
  vm.removeAllMarkers = removeAllMarkers;
  vm.dynMarkers = [];
  vm.map;

  NgMap.getMap().then(function(map) {
    for (var i = 0; i < 1000; i++) {
      var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
      vm.dynMarkers.push(new google.maps.Marker({
        position: latLng
      }));
    }
    vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {});
    vm.map = map;
  });

  function removeAllMarkers() {
    vm.markerClusterer.removeMarkers(vm.dynMarkers);
    vm.dynMarkers = [];
    console.log('all markers in cluster removed');
  }
});

map,
div[map] {
  display: block;
  width: 600px;
  height: 400px;
}

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>Dynamic ngMap demo</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="https://maps.google.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY"></script>
  <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js"></script>
  <script>
    MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'; //changed image path
  </script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markers.js"></script>
</head>

<body>
  <h1>Marker Cluster</h1>
  <hr />
  <div ng-controller="mapController as vm">
    <ng-map zoom="2" center="[43.6650000, -79.4103000]"></ng-map>
    <button ng-click="vm.removeAllMarkers();" type="button">Remove All Markers</button>
  </div>
</body>

</html>

【讨论】：