Google Maps API v2では、すべてのマップマーカーを削除したい場合は、次のようにするだけです。
map.clearOverlays();
Google Maps API v3でこれを行うにはどうすればよいですか?
リファレンスAPIを見ると、私にはわかりません。
Google Maps API v2では、すべてのマップマーカーを削除したい場合は、次のようにするだけです。
map.clearOverlays();
Google Maps API v3でこれを行うにはどうすればよいですか?
リファレンスAPIを見ると、私にはわかりません。
回答:
次のようにしてください:
I.グローバル変数を宣言します。
var markersArray = [];
II。関数を定義します。
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();
またはmap.clearOverlays();
関数を必要な場所に呼び出します。
それでおしまい!!
markersArray
:私は一種奇数の見つける代わりに、その長さを設定する空の配列にmarkersArray = [];
while
配列を処理するためのアプローチを使用しますwhile(markersArray.length) { markersArray.pop().setMap(null); }
。その後、アレイをクリアする必要はありません。
同じ問題。このコードはもう機能しません。
私はそれを修正しました、このように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
new Array();
?
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を手動で呼び出す必要をなくしました。
長所
短所
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にはないので、上記のカスタム実装を使用しました。
免責事項:私はこのコードを記述しませんでしたが、コードベースにマージするときに参照を保持するのを忘れたため、どこから来たのかわかりません。
新しいバージョン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;
}
}
Googleのデモギャラリーには、その方法に関するデモがあります。
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html
ソースコードを表示して、マーカーがどのように追加されるかを確認できます。
簡単に言えば、マーカーをグローバル配列で保持します。それらをクリア/削除するとき、それらは配列をループして、指定されたマーカーオブジェクトで ".setMap(null)"を呼び出します。
ただし、この例では1つの「トリック」を示しています。この例の「クリア」は、それらをマップから削除するが、それらを配列に保持することを意味します。これにより、アプリケーションでそれらをマップにすばやく再追加できます。ある意味で、これはそれらを「隠す」ように振る舞います。
「削除」は配列もクリアします。
for (i in markersArray) {
markersArray[i].setMap(null);
}
IEでのみ動作します。
for (var i=0; i<markersArray.length; i++) {
markersArray[i].setMap(null);
}
クロム、Firefox、すなわち...
解決策は非常に簡単です。次のメソッドを使用できますmarker.setMap(map);
。ここでは、ピンが表示されるマップを定義します。
したがって、null
このメソッドで設定すると(marker.setMap(null);
)、ピンが消えます。
これで、マップ内のすべてのマーカーを非表示にしながら、関数魔女を書くことができます。
追加して、ピンを配列に入れて、markers.push (your_new pin)
または次のコードで宣言します。
// 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);
}
}
すべてのマーカーを非表示にするには、次のように関数を呼び出す必要がありますnull
。
// 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 = [];
}
これは私の完全なコードです。それは私が削減できる最も簡単なものです。
コード内で主要なgoogle APIに置き換えることができるように注意YOUR_API_KEY
してください。
<!DOCTYPE html>
<html>
<head>
<title>Remove Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>
// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var markers = [];
function initMap() {
var haightAshbury = {lat: 37.769, lng: -122.446};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: haightAshbury,
mapTypeId: 'terrain'
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event) {
addMarker(event.latLng);
});
// Adds a marker at the center of the map.
addMarker(haightAshbury);
}
// 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);
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
あなたは、グーグル開発者またはグーグル開発者ウェブサイト上の完全なドキュメンテーションに相談するかもしれません。
set_map
両方の回答に投稿された「」機能は、Google Maps v3 APIでは機能しないようです。
何があったんだろう
更新:
GoogleがAPIを「set_map
」が「」ではないように変更したようですsetMap
。
http://code.google.com/apis/maps/documentation/v3/reference.html
マーカーを削除する方法の例を次に示します。
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 = [];
}
以下は、Anonによるものですが、オーバーレイを繰り返しクリアするとちらつきが発生しますが、完全に機能します。
次のようにしてください:
I.グローバル変数を宣言します。
var markersArray = [];
II。関数を定義します。
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()
必要に応じて関数を呼び出します。
それでおしまい!!
お役に立てれば幸いです。
for(in in markersArray){}
おそらく、期待どおりに動作しません。Array
コードの他の場所で拡張されている場合は、インデックスだけでなく、それらのプロパティも反復処理します。そのJavaScriptバージョンは、markersArray.forEach()
どこでもサポートされているわけではありません。あなたはより良いでしょうfor(var i=0; i<markersArray.length; ++i){ markersArray.setMap(null); }
最も簡単な方法として、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();
}
3.マーカーをクリアするには、MarkerMangerのclearMarkers()
関数を呼び出すだけです
mgr.clearMarkers();
clearMarkers
doが呼び出すマーカーを反復ですmarker.setMap(null)
(私はソースをチェックします)。それらを配列に入れて自分で行う作業は少なくなります。
ポリゴン、マーカーなどを含むすべてのオーバーレイをクリアするには...
単に使用:
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"));
}
マップからすべてのマーカーを削除するには、次のような関数を作成します。
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 = [];
}
これを行う最もクリーンな方法は、マップのすべてのフィーチャを反復処理することです。マーカー(ポリゴン、ポリラインなどと共に)は、マップのデータレイヤーに格納されます。
function removeAllMarkers() {
map.data.forEach((feature) => {
feature.getGeometry().getType() === 'Point' ? map.data.remove(feature) : null
});
}
マーカーがDrawing Managerを介して追加されている場合は、マーカーのグローバル配列を作成するか、次のように作成時にマーカーをデータレイヤーにプッシュするのが最善です。
google.maps.event.addListener(drawingManager, 'overlaycomplete', (e) => {
var newShape = e.overlay;
newShape.type = e.type;
if (newShape.type === 'marker') {
var pos = newShape.getPosition()
map.data.add({ geometry: new google.maps.Data.Point(pos) });
// remove from drawing layer
newShape.setMap(null);
}
});
後で他のgoogle.maps.dataクラスメソッドを使用できるようになるため、2番目の方法をお勧めします。
これは、Google自身が少なくとも1つのサンプルで使用する方法です。
var markers = [];
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
完全なコード例については、Googleサンプルを確認してください。
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
理由はわかりsetMap(null)
ませんが、を使用している場合、マーカーの設定が機能しませんでしたDirectionsRenderer
。
私の場合も私に電話setMap(null)
しなければなりませんでしたDirectionsRenderer
。
そんな感じ:
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
if (map.directionsDisplay) {
map.directionsDisplay.setMap(null);
}
map.directionsDisplay = directionsDisplay;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsDisplay.setMap(map);
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
グーグルマップをクリアするだけ
mGoogle_map.clear();
私は提案されたソリューションをすべて試しましたが、すべてのマーカーがクラスターの下にある間は何もうまくいきませんでした。最終的に私はこれを置くだけです:
var markerCluster = new MarkerClusterer(map, markers,
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
agentsGpsData[agentGpsData.ID].CLUSTER = markerCluster;
//this did the trick
agentsGpsData[agentId].CLUSTER.clearMarkers();
つまり、クラスターでマーカーをラップし、すべてのマーカーを削除したい場合は、次を呼び出します。
clearMarkers();
そのマーカーにマップnullを設定する必要があります。
var markersList = [];
function removeMarkers(markersList) {
for(var i = 0; i < markersList.length; i++) {
markersList[i].setMap(null);
}
}
function addMarkers() {
var marker = new google.maps.Marker({
position : {
lat : 12.374,
lng : -11.55
},
map : map
});
markersList.push(marker);
}
私は仕事がうまくいく速記を使います。するだけ
map.clear();
gmap V3プラグインを使用する場合:
$("#map").gmap("removeAllMarkers");
参照:http : //www.smashinglabs.pl/gmap/documentation#after-load
これはおそらく同じような解決策かもしれませんが、これは私がやっていることです
$("#map_canvas").html("");
markers = [];
いつも私のために働く。