は、私はリフレッシュすることができますどのように/ ngMaps

私が作成し、markerclustererライブラリと私のマーカーをクラスタリングしていますし、このコードを使用して、Googleマップ上のマーカーを削除します。は、私はリフレッシュすることができますどのように/ ngMaps

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);を見ることができましたが、私は成功しませんでした。

何かアドバイスが高く評価され、感謝

出典

2017-10-13 Smiter

あなたが見たもの（ 'markers [key] .setMap（null）;'）の実装はどこですか？ – MrUpsidown

私は主にこのドキュメントを参照しています： https://ngmap.github.io/#/!marker-remove.html ただし、クラスタリングライブラリを使用してマーカー/マーカーを削除する例はありません。そして私はマーカーを別に作ります。私はこの行を使用して、 'var markerCluster = new MarkerClusterer（$ scope.assetMap、marker、mcOptions）;' を生成します。 '$ scope.assetMap.markers [key] .setMap（null）;'はエラーを返します：マーカーは未定義です。マップを初期化した後に、それを使用していました。これまでに管理していましたか？ – Smiter

実は、あなたはちょうどそのMarkerClusterer.prototype.removeMarker機能を使用すると、あなただけの幸運なことにそのMarkerClusterer.prototype.removeMarkers使用したマーカーの配列を削除する必要があるマーカーを削除するには、Googleのオリジナルmarkerclusterer.jsを、使用している場合は、 ngMapsのmarkerclusterer.jsはオリジナルのラッパーです。確認してください（それはあなたのために簡単だように、私はベースとしてngMaps例ライブラリを使用ここであなたが従うことのために、私はplunker例を作った

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

：Googleのdocumentation

例でその上詳細）独自のAPIキーを使用します

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>

0： https://plnkr.co/edit/RZNc2KLdO8qmW0o2Kimq?p=previewここ

は同様に埋め込まれたコードです

出典

2017-10-19 09:25:15 henrisycip

は、私はリフレッシュすることができますどのように/ ngMaps

答えて

関連する問題