删除谷歌标记[重复]
Posted
技术标签:
【中文标题】删除谷歌标记[重复]【英文标题】：Removing Google Markers [duplicate] 【发布时间】：2017-09-12 02:21:17 【问题描述】：下面的代码会加载谷歌地图并每隔一秒左右刷新一次标记的位置。问题是代码会一遍又一遍地写入标记的位置。有没有办法在编写新标记之前删除以前的标记？
问题在于，当它清除标记 clearOverlays(); 时，它不会更新新标记。
任何帮助或建议将不胜感激。
这个问题与之前的问题不同，因为问题是在调用 clearOverlays(); 时出现的。从函数 refreshDiv() 它不会更新。
<!DOCTYPE html>
<html>
<head>
<style>
#map
height: 100%;
html, body
height: 100%;
margin: 0;
padding: 0;
</style>
</head>
<body onload='refreshDiv()'>
<div id='map'></div>");
<script>
function refreshDiv()
clearOverlays();
var refresher = setTimeout('refreshDiv()', 1000);
updateMarker(map);
function initMap()
window.map = new google.maps.Map(document.getElementById('map'),
zoom: 10,
center: lat: ".$latitude.", lng: ".$longitude."
);
function clearOverlays()
for (var i = 0; i < marker.length; i++ )
marker[i].setMap(null);
marker.length = 0;
for (var i = 0; i < beach.length; i++ )
beach[i].setMap(null);
beach.length=0;
function updateMarker(map)
var beaches = [['"Jim"', 55.0102686,-1.5847956999999724],];
var image =
url: '1.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// 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)
;
var shape =
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
;
for (var i = 0; i < beaches.length; i++)
window.beach = beaches[i];
window.marker = new google.maps.Marker(
position: lat: beach[1], lng: beach[2],
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
);
</script>
<script async defer
src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'>
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：根据我的假设，您需要更新标记。 如果我是正确的，请检查以下答案。正如我已经定义了他们的标记动态更新他们的。
https://***.com/a/43435488/7668554
【讨论】：
感谢大家的帮助。但不能真正使用这些答案中的任何一个。原谅我的无知..【参考方案2】：希望这个例子有帮助！
<!DOCTYPE html>
<html>
<head>
<title>Remove Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map
height: 100%;
/* Optional: Makes the sample page fill the window. */
html, body
height: 100%;
margin: 0;
padding: 0;
#floating-panel
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
</style>
</head>
<body>
<div id="floating-panel">
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
</div>
<div id="map"></div>
<p>Click on the map to add markers.</p>
<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 initMap()
var haightAshbury = lat: 37.769, lng: -122.446;
map = new google.maps.Map(document.getElementById('map'),
zoom: 12,
center: haightAshbury,
mapTypeId: 'terrain'
);
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function(event)
addMarker(event.latLng);
);
// Adds a marker at the center of the map.
addMarker(haightAshbury);
// Adds 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 setMapOnAll(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()
setMapOnAll(null);
// Shows any markers currently in the array.
function showMarkers()
setMapOnAll(map);
// Deletes all markers in the array by removing references to them.
function deleteMarkers()
clearMarkers();
markers = [];
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
【讨论】：
谢谢。在谷歌上看到过，但问题是代码清除了标记但没有再次更新它们。我添加了 clearOverlays();但这似乎不允许之后进行更新。有什么想法吗？ 有一个类似的问题，您可以尝试该解决方案。我认为它应该工作。 ***.com/questions/8229827/… 我很久以前就研究过 Google maps api。我会尝试在我的旧代码文件中找出我是如何做到的。以上是关于删除谷歌标记[重复]的主要内容，如果未能解决你的问题，请参考以下文章