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!!
全实例：
<!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 οnclick="clearMarkers();" type=button value="Hide%20Markers">
<input οnclick="showMarkers();" type=button value="Show%20All%20Markers">
<input οnclick="deleteMarkers();" type=button value="Delete%20Markers">
</div>
<div id="map-canvas"></div>
<p>Click on the map to add markers.</p>
</body>
</html>
只保留最新一个标记（自定义 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);
}
