我正在尝试通过 refreshDiv() 函数实时更新标记，并且我已经设法通过 addMarker() 添加标记+删除所有标记 和 clearMarkers()。但是当调用 clearMarkers() 时，它会完全清除它们。
有没有办法设置标记的位置然后将其移动到下一个位置。
进一步说明
我正在开发一个需要显示每个标记的位置的项目，为此，我需要更新标记的位置，当更新标记的位置时，它会留下之前的位置，所以我使用clearMarkers()，但这会删除所有标记。我需要它来删除以前的标记，但将最新的标记保留在那里。
<!DOCTYPE html>
<html>
<head>
<title>Remove Markers</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload='refreshDiv()'>
<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>
var map;
var markers = [];
**//this is were the problem lies**
function refreshDiv()
{
addMarker(37.769,-122.446);
var refresher = setTimeout('refreshDiv()', 3000);
clearMarkers();
}
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.
// 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=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'>
</script>
</body>
</html>
最佳答案
您的代码在设置最终位置后清除了标记，因此您看不到最终标记。将 clearMarkers() 移动为 refreshDiv 中的第一个调用可以解决此问题。看看下面的代码:.
<!DOCTYPE html>
<html>
<head>
<title>Remove Markers</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload='refreshDiv()'>
<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>
var map;
var markers = [];
//this is were the problem lies**
function refreshDiv()
{
clearMarkers();
var position = new google.maps.LatLng(37.769,-122.446);
addMarker(position);
var refresher = setTimeout('refreshDiv()', 3000);
}
function initMap() {
//var haightAshbury = {lat: 37.769, lng: -122.446};
var haightAshbury = new google.maps.LatLng(37.769, -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.
// 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=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'>
</script>
</body>
</html>关于javascript - 谷歌地图删除标记效率太高，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43439793/