June 22, 2015

Google Maps API v3: Remove Markers 移除标记

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;
}

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: 通过邮编获取经纬度 Get Location (Latitude and Longitude) from Zip Code (Pin Code) using JavaScript

Google Maps V3: 导航到指定地址 Draw (Plot) route between User’s current location and Specified location

点击谷歌地图后获取经纬度 Get Latitude and Longitude (Location Coordinates) using Google Maps OnClick event

Google Maps V3: 通过经纬度获取地址信息 Get address from Latitude and Longitude

GMaps.js：让你快速集成 Google Maps 服务的 jQuery 插件

jQuery地图插件-jqvmap

谷歌地图查询两地开车路线 Google Maps API V3: DirectionsService (Driving Directions) example

谷歌地图添加点击事件 Google Maps API V3: Add click event listener to all (multiple) markers

本文: Google Maps API v3: Remove Markers 移除标记