如何清除地图上当前的标记[重复]
Posted
技术标签:
【中文标题】如何清除地图上当前的标记[重复]【英文标题】：how to clear markers currently on the map [duplicate] 【发布时间】：2014-09-02 02:50:12 【问题描述】：我正在开发一个 google api v3 网络应用程序。当地图加载时，它会使用地理定位服务显示我的当前位置，并在该位置放置一个标记。现在，当我搜索一个地方或试图找到两个地方之间的方向时，我想删除以前在地图上的所有标记，以便唯一的当前标记是那些表示位置起点和终点的标记.但这是我遇到问题的地方，每当我搜索新地方或尝试获得新方向时，以前的标记，尤其是页面加载时的地理位置标记仍在显示。
我查看了 maps api，我看到了他们用来删除以前标记的标记数组。我把它放在我的代码中，它仍然不起作用。我将粘贴我的代码，以便您自己查看。
---------------------------------MAPS.JS ------------ ------------------------------
var directionsDisplay;
var geocoder;
var map;
var markers = [];
var directionsService = new google.maps.DirectionsService();
function initialize()
directionsDisplay = new google.maps.DirectionsRenderer();
geocoder = new google.maps.Geocoder();
var mapOptions =
zoom: 15
;
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Try html5 geolocation
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(function(position)
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker(
position: pos,
map: map
);
markers.push(marker);
map.setCenter(pos);
, function()
handleNoGeolocation(true);
);
else
// Browser doesn't support Geolocation
handleNoGeolocation(false);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
function calcRoute(start, end)
var request =
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
;
directionsService.route(request, function(response, status)
if (status == google.maps.DirectionsStatus.OK)
directionsDisplay.setDirections(response);
);
function handleNoGeolocation(errorFlag)
if (errorFlag)
var content = 'Error: The Geolocation service failed.';
else
var content = 'Error: Your browser doesn\'t support geolocation.';
var options =
map: map,
position: new google.maps.LatLng(60, 105),
content: content
;
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
$("#search").click(function()
var start = $.trim($("#start").val());
var end = $.trim($("#end").val());
if (start==="" && end === "")
alert("Enter a valid address");
else
if (end.length === 0)
searchPlace(start);
else
calcRoute(start, end);
);
//search for a place
function searchPlace(start)
geocoder.geocode( 'address': start, function(results, status)
if (status == google.maps.GeocoderStatus.OK)
setAllMap(null);
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker(
map: map,
position: results[0].geometry.location
);
markers.push(marker);
else
alert("Geocode was not successful for the following reason: " + status);
);
//remove all current markers that are on the map
function setAllMap(map)
for (var i = 0; i < markers.length; i++)
markers[i].setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
----------------------------INDEX.HTML---------------- --------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Direct</title>
<link rel="stylesheet" href="css/style.css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<body>
<div id="control">
<strong>Start:</strong>
<input id="start" type="text" />
<strong>End:</strong>
<input id="end" type="text" />
<button id="search">Find place</button>
</div>
<div id="directions-panel"></div>
<div id="map-canvas"></div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/maps.js"></script>
</body>
</html>
请看一下代码，告诉我哪里出错了。
【问题讨论】：
【参考方案1】：我认为这是您尝试删除标记的地方
//remove all current markers that are on the map
function setAllMap(map)
for (var i = 0; i < markers.length; i++)
markers[i].setMap(map);
要删除标记，您需要将地图设置为null，我就是这样做的。
function RemoveAllMarkers()
while (markers.length > 0)
markers.pop().setMap(null);
markers.length = 0;
【讨论】：
以上是关于如何清除地图上当前的标记[重复]的主要内容，如果未能解决你的问题，请参考以下文章