如何使用ngMaps刷新/刪除Google地圖上的標記

Question

我正在使用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); 可以使用，但我沒有成功。

任何建議表示贊賞，謝謝

Answer 1

實際上，如果您使用的是Google原始的markerclusterer.js ，則只需使用其MarkerClusterer.prototype.removeMarker函數即可刪除標記，而只需使用其MarkerClusterer.prototype.removeMarkers即可刪除標記數組。只是原始包裝。 有關更多信息，請參見Google 文檔

例如：

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

我為您提供了一個更簡單的示例，其中我以ngMaps示例庫為基礎，以便於您輕松使用（確保使用自己的API密鑰）： https : //plnkr.co/edit/RZNc2KLdO8qmW0o2Kimq？ p =預覽

這也是嵌入式代碼：

 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>

如何使用ngMaps刷新/刪除Google地圖上的標記

問題描述

1 個解決方案

解決方案1
1 已采納 2017-10-19 09:25:15

如何使用ngMaps刷新/刪除Google地圖上的標記

問題描述

1 個解決方案

解決方案1 1 已采納 2017-10-19 09:25:15

解決方案1
1 已采納 2017-10-19 09:25:15