Die Lösung ist ganz einfach. Sie können die Methode verwenden : marker.setMap(map);. Hier legen Sie fest, auf welcher Karte der Pin angezeigt wird.
Wenn Sie also nulldiese Methode ( marker.setMap(null);) festlegen , verschwindet der Stift.
Jetzt können Sie eine Funktion schreiben, während alle Markierungen in Ihrer Karte verschwinden.
Sie fügen einfach hinzu, um Ihre Pins in ein Array einzufügen und sie mit markers.push (your_new pin)oder diesem Code zu deklarieren, zum Beispiel:
// 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);
}
Dies ist eine Funktion, mit der alle Markierungen Ihres Arrays in der Karte gesetzt oder ausgeblendet werden können:
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
Um alle Ihre Marker zu verschwinden, sollten Sie die Funktion aufrufen mit null:
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
Und um alle Ihre Marker zu entfernen und zu verschwinden, sollten Sie Ihr Array von Markern wie folgt zurücksetzen:
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
Dies ist mein vollständiger Code. Es ist das einfachste, auf das ich mich reduzieren könnte.
Seien Sie vorsichtig, YOUR_API_KEYwenn Sie den Code durch Ihre Google-Schlüssel-API ersetzen :
<!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>
Sie können den Google-Entwickler oder die vollständige Dokumentation auf der Google-Entwickler-Website konsultieren .