javascript - Google Maps API v3:すべてのマーカーを削除するには?

Question

Google Maps API v2 では、すべてのマップマーカーを削除したい場合は、次のように簡単に実行できます。

map.clearOverlays();

Google Maps API v3でこれを行うにはどうすればよいですか?

Reference APIを見ると、よくわかりません。

score 493 · Accepted Answer

次の操作を行うだけです。

I. グローバル変数を宣言します。

var markersArray = [];

Ⅱ．関数を定義します。

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

また

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. 以下を呼び出す前に、「markerArray」にマーカーをプッシュします。

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. clearOverlays();必要に応じてormap.clearOverlays();関数を呼び出します。

それでおしまい！！

score 85 · Accepted Answer

同じ問題。このコードはもう機能しません。

修正しました。 clearMarkers メソッドを次のように変更します。

set_map(null) ---> setMap(null)

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

ドキュメントが更新され、トピックの詳細が含まれるようになりました: https://developers.google.com/maps/documentation/javascript/markers#remove

score 48 · Accepted Answer

V3にはまだそのような機能はないようです。

地図上にあるすべてのマーカーへの参照を配列に保持することをお勧めします。そして、すべてを削除したい場合は、配列をループして、各参照で .setMap(null) メソッドを呼び出すだけです。

詳細情報/コードについては、この質問を参照してください。

私のバージョン:

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

google.maps.Marker.prototype._setMap = google.maps.Marker.prototype.setMap;

google.maps.Marker.prototype.setMap = function(map) {
    if (map) {
        map.markers[map.markers.length] = this;
    }
    this._setMap(map);
}

コードは、このコードの編集バージョンですhttp://www.lootogo.com/googlemapsapi3/markerPlugin.html addMarker を手動で呼び出す必要がなくなりました。

長所

このようにして、コードをコンパクトに 1 か所にまとめます (名前空間を汚染しません)。
map.getMarkers() を呼び出すことで、マップ上のすべてのマーカーをいつでも見つけることができます。

短所

今のようにプロトタイプとラッパーを使用すると、コードが Google コードに依存するようになります。ソースに市長の変更を加えると、これが壊れます。
それを理解していないと、壊れた場合に修正することはできません。これを破る何かを変更する可能性は低いですが、それでも..
1 つのマーカーを手動で削除しても、その参照はマーカー配列に残ります。(setMap メソッドを編集して修正することもできますが、トラフマーカー配列をループして参照を削除するという代償を払います)

score 26 · Accepted Answer

これは、 YingYang が 14 年 3 月 11 日 15:049にユーザーの元の質問に対する元の応答の下に最初に投稿したすべてのソリューションの中で最も単純なものでした。

私は2.5年後にGoogleマップv3.18で彼の同じソリューションを使用していますが、それは魅力のように機能します

markersArray.push(newMarker) ;
while(markersArray.length) { markersArray.pop().setMap(null); }

// No need to clear the array after that.

score 21 · Accepted Answer

google.maps.Map.prototype.markers = new Array();

google.maps.Map.prototype.addMarker = function(marker) {
    this.markers[this.markers.length] = marker;
};

google.maps.Map.prototype.getMarkers = function() {
    return this.markers
};

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i<this.markers.length; i++){
        this.markers[i].setMap(null);
    }
    this.markers = new Array();
};

V3にはないと思うので、上記のカスタム実装を使用しました。

免責事項: このコードは書いていませんが、コードベースにマージしたときに参照を保持するのを忘れていたので、どこから来たのかわかりません。

score 18 · Accepted Answer

新しいバージョンv3では、アレイを維持することを推奨しました。次のように。

overlay-overviewのサンプルを参照してください。

var map;
var markersArray = [];

function initialize() {
  var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
  var mapOptions = {
    zoom: 12,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

function addMarker(location) {
  marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(map);
    }
  }
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
    markersArray.length = 0;
  }
}

score 6 · Accepted Answer

ローリンガーの答えのクリーンで簡単なアプリケーション。

function placeMarkerAndPanTo(latLng, map) {
      while(markersArray.length) { markersArray.pop().setMap(null); }
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
      map.panTo(latLng);

      markersArray.push(marker) ;
    }

score 6 · Accepted Answer

Google のデモギャラリーには、その方法に関するデモがあります。

http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html

ソースコードを表示して、マーカーの追加方法を確認できます。

簡単に言えば、マーカーをグローバル配列に保持します。それらをクリア/削除するとき、それらは配列をループし、指定されたマーカーオブジェクトで「.setMap(null)」を呼び出します。

ただし、この例は 1 つの「トリック」を示しています。この例の「クリア」とは、それらをマップから削除するが配列内に保持することを意味します。これにより、アプリケーションはそれらをマップにすばやく再追加できます。ある意味では、これはそれらを「隠す」ように機能します。

「削除」は配列もクリアします。

score 6 · Accepted Answer

for (i in markersArray) {
  markersArray[i].setMap(null);
}

IEでのみ動作しています。

for (var i=0; i<markersArray.length; i++) {
  markersArray[i].setMap(null);
}

クロム、ファイアフォックス、つまり...

score 4 · Accepted Answer

ここでは、マーカーを削除する方法の例を見つけることができます:

https://developers.google.com/maps/documentation/javascript/examples/marker-remove?hl=es

// Add a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
   }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
  clearMarkers();
  markers = [];
}

score 4 · Accepted Answer

両方の回答に投稿された" set_map" 関数は、Google マップ v3 API では機能しなくなったようです。

どうしたのかしら

アップデート：

Google が API を変更して、「」が「set_map」ではなくなったようsetMapです。

http://code.google.com/apis/maps/documentation/v3/reference.html

score 3 · Accepted Answer

次の方法でも実行できます。

function clearMarkers(category){ 
  var i;       

  for (i = 0; i < markers.length; i++) {                          
    markers[i].setVisible(false);        
  }    
}

score 3 · Accepted Answer

次の Anon は完全に機能しますが、オーバーレイを繰り返しクリアするとちらつきがあります。

次の操作を行うだけです。

I. グローバル変数を宣言します。

var markersArray = [];

Ⅱ．関数を定義します。

function clearOverlays() {
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
}

III. 以下を呼び出す前に、「markerArray」にマーカーをプッシュします。

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. clearOverlays()必要に応じて関数を呼び出します。

それでおしまい！！

それがあなたを助けることを願っています。

score 3 · Accepted Answer

最も簡単な方法として、google-maps-utility-library-v3 プロジェクトの markermanager ライブラリを使用することがわかりました。

1.MarkerManager をセットアップする

mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
    loadMarkers();
});

2. MarkerManager にマーカーを追加する

function loadMarkers() {
  var marker = new google.maps.Marker({
            title: title,
            position: latlng,
            icon: icon
   });
   mgr.addMarker(marker);
   mgr.refresh();
 }

clearMarkers()3. マーカーをクリアするには、MarkerManger の関数を呼び出すだけです。

mgr.clearMarkers();

score 2 · Accepted Answer

kmlLayer.setMap(null) でこれを試したところ、うまくいきました。それが通常のマーカーで機能するかどうかはわかりませんが、正しく機能するようです。

score 2 · Accepted Answer

ポリゴン、マーカーなどを含むすべてのオーバーレイをクリアするには...

単に使用します：

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);}

これは、マップアプリケーションでそれを行うために私が書いた関数です:

  function clear_Map() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    //var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var myOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: HamptonRoads
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

score 2 · Accepted Answer

マップからすべてのマーカーを削除するには、次のような関数を作成します。

1.addMarker(location): この関数は、地図上にマーカーを追加するために使用されます

2.clearMarkers(): この関数は、配列からではなく、マップからすべてのマーカーを削除します

3.setMapOnAll(map): この関数は、配列にマーカー情報を追加するために使用されます

4.deleteMarkers(): この関数は、配列内のすべてのマーカーへの参照を削除して削除します。

// Adds a marker to the map and push to the array.
      function addMarker(location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markers.push(marker);
      }


// Sets the map on all markers in the array.
      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }



// Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

// Deletes all markers in the array by removing references to them.
      function deleteMarkers() {
        clearMarkers();
        markers = [];
      }

score -2 · Accepted Answer

gmap V3 プラグインを使用する場合: $("#map").gmap("removeAllMarkers");

参照: http://www.smashinglabs.pl/gmap/documentation#after-load

score -3 · Accepted Answer

これは単純な解決策かもしれませんが、これが私がしていることです

$("#map_canvas").html("");
markers = [];

私のために毎回動作します。

javascript - Google Maps API v3:すべてのマーカーを削除するには?

32 に答える 32

Related

Reference