Simply do the following:
I. Declare a global variable:
var markersArray = [];
II. Define a function:
function clearOverlays() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
OR
google.maps.Map.prototype.clearOverlays = function() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
III. Push markers in the 'markerArray' before calling the following:
markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});
IV. Call the clearOverlays();
or map.clearOverlays();
function wherever required.
That's it!!
原文:http://stackoverflow.com/a/2439176/4484798
全实例:
<!DOCTYPE html>
<html>
<head>
<title>Remove Markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<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 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);
// This event listener will call addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
// Adds a marker at the center of the map.
addMarker(haightAshbury);
}
// 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);
}
// Shows any markers currently in the array.
function showMarkers() {
setAllMap(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input onclick="clearMarkers();" type=button value="Hide%20Markers">
<input onclick="showMarkers();" type=button value="Show%20All%20Markers">
<input onclick="deleteMarkers();" type=button value="Delete%20Markers">
</div>
<div id="map-canvas"></div>
<p>Click on the map to add markers.</p>
</body>
</html>
原文:https://developers.google.com/maps/documentation/javascript/examples/marker-remove
只保留最新一个标记(自定义 setOneMap() )
var marker;
var markers = [];
var image = {
url: '/images/light.png',
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 32)
};
console.log(markers);
address = country + " " + state + " " + city + ' ' + street;
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
$location = results[0].geometry.location;
map.setCenter($location);
map.setZoom(12);
var marker = new google.maps.Marker({
map: map,
icon: image,
position:$location,
});
markers.push(marker);
setOneMap();
$('.look_up_address').text(address);
marker.setAnimation(google.maps.Animation.DROP);
}
else alert("Geocode was not successful for the following reason: " + status);
});
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) markers[i].setMap(map);
}
function setOneMap() {
for (var i = 0; i < markers.length; i++) { if(i < (markers.length-1)) markers[i].setMap(null); }
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
原文:http://justcode.ikeepstudying.com/2015/06/google-maps-api-v3-remove-markers-%E7%A7%BB%E9%99%A4%E6%A0%87%E8%AE%B0/
转自:Google Maps API v3: Remove Markers 移除标记