当用户按下按钮时,我正在尝试从地图中删除所有标记,这听起来应该非常简单,所以我可能错过了一些非常愚蠢的东西。
我有一个全局数组将它们全部存储在:
var markersArray = [];
然后,我将所有标记添加到地图中,并将它们推送到数组中:
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lng),
title: description,
icon: image,
shadow: shadow,
shape: shape
});
markersArray.push(marker);
最后,我声明了一个函数,该函数应该从数组中删除所有标记:
google.maps.Map.prototype.deleteOverlays = function() {
if (markersArray.length) {
var i;
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
然而,这根本不起作用,经过无数小时的摆弄,我完全迷失了。我哪里出错了?
感谢您抽出宝贵时间:)
你的数组迭代器是错误的(而且效率低下)。
您正在循环访问数组的属性,而不是元素。
请参阅下面的修改代码:
google.maps.Map.prototype.deleteOverlays = function() {
if (markersArray.length) {
for (var i = 0, end = markersArray.length; i < end; i++) {
markersArray[i].setMap(null);
}
markersArray = new Array(); //like Scorpion-Prince said
}
}
我这样做没有任何问题,而且效率也很高:
clearMarkers = function(){
var marker;
while( marker = markers.pop() ){
marker.setMap(null);
}
};
for 循环之后将 maps.marker 设置为空数组,以通过添加以下行来清除标记:
this.markers = new Array();
或
this.markers = [];
<</div>
div class="one_answers">我把一个独立的页面放在一起,只对标记选项(未知引用)进行更改。关键部分似乎是调用删除的位置。它必须能够引用映射变量。 map.deleteOverlays();
这是JS小提琴和代码:
http://jsfiddle.net/VUfEy/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var markersArray = [];
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
addMarker(e.latLng);
});
document.getElementById("delete").onclick = function() {
map.deleteOverlays();
};
}
function addMarker(latLng) {
var marker = new google.maps.Marker({
map: map,
//position: new google.maps.LatLng(lat, lng),
//title: description,
//icon: image,
//shadow: shadow,
//shape: shape
position: latLng
});
markersArray.push(marker);
}
google.maps.Map.prototype.deleteOverlays = function() {
if (markersArray.length) {
var i;
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<button id="delete">delete overlays</button>
<div id="map_canvas"></div>
</body>
</html>