0

ユーザーがボタンを押したときにマップからすべてのマーカーを削除しようとしていますが、これは非常に単純なはずなので、かなりばかげたものを見逃している可能性があります。

それらをすべて格納するグローバル配列があります。

var markersArray = [];

次に、すべてのマーカーをマップに追加し、それらを配列にプッシュします。

var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        title: description,
        icon: image,
        shadow: shadow,
        shape: shape
    });

  markersArray.push(marker);

最後に、配列からすべてのマーカーを削除する必要がある関数を宣言しました。

google.maps.Map.prototype.deleteOverlays = function() {
if (markersArray.length) {
    var i;
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

しかし、これはまったく機能せず、何時間もいじった後、完全に失われました。どこが間違っていますか？

お時間をいただきありがとうございます:)

4

3 に答える 3

0

for ループの後に maps.markers を空の配列に設定し、次の行を追加してマーカーをクリアします。

this.markers = new Array();

また

this.markers = [];
于 2012-05-09T16:38:09.447 に答える
0

配列反復子が間違っています (そして非効率的です)。
要素ではなく、配列のプロパティを反復処理していました。

以下の変更されたコードを参照してください。

google.maps.Map.prototype.deleteOverlays = function() {
if (markersArray.length) {
    for (var i = 0, end = markersArray.length; i < end; i++) {
      markersArray[i].setMap(null);
    }
    markersArray = new Array(); //like Scorpion-Prince said
  }
}

この方法で問題なく実行できました。また、非常に効率的です。

clearMarkers = function(){
    var marker;
    while( marker = markers.pop() ){
        marker.setMap(null);
    }
};
于 2012-05-09T16:44:44.670 に答える
0

マーカー オプションの変更のみを行うスタンドアロン ページをまとめました (不明な参照)。重要な部分は、削除が呼び出されている場所のようです。マップ変数を参照できる必要があります。map.deleteOverlays();

JS Fiddle とコードは次のとおりです。

http://jsfiddle.net/VUfEy/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
      var markersArray = [];
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        google.maps.event.addListener(map, 'click', function(e) {
          addMarker(e.latLng);
        });
        document.getElementById("delete").onclick = function() { 
          map.deleteOverlays(); 
        };
      }

      function addMarker(latLng) {
       var marker = new google.maps.Marker({
        map: map,
        //position: new google.maps.LatLng(lat, lng),
        //title: description,
        //icon: image,
        //shadow: shadow,
        //shape: shape
        position: latLng
       });
       markersArray.push(marker);
      }

      google.maps.Map.prototype.deleteOverlays = function() {
       if (markersArray.length) {
        var i;
        for (i in markersArray) {
          markersArray[i].setMap(null);
        }
        markersArray.length = 0;
       }
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <button id="delete">delete overlays</button>
    <div id="map_canvas"></div>
  </body>
</html>
于 2012-05-09T17:07:53.587 に答える