我一直在研究 Google map ，我希望实现以下目标:
1) 逐一放下标记；
2)删除最后一个标记(因此视口(viewport)中只有一个标记)
3) 删除下一个标记
4)在每个标记中打开信息窗口
5)重复操作
我一直在尝试扭曲动画代码并尝试将 map 设置为 null (setMap(null))，但在调用 drop 函数后没有成功。关于如何做到这一点有什么建议吗？ 底线:有类似 this 的内容。当然，这还有一大困难，那就是从数据库中提取数据。
这是code 。 任何帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with <code>setTimeout()</code></title>
<style>
#map-canvas{
width:600px;
height:600px;
position: "absolute";
top: 0px;
left: 0px;
overflow: "hidden";
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var Marker;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
drop();
}
function drop(){
for (var i = 0; i < neighborhoods.length; i++) {
var m = neighborhoods[i];
(function(n){
setTimeout(function() {
addMarker(n);
}, i * 500);
}(m));
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html
>
最佳答案
您是否希望一次只显示一个标记？
下面是一些执行此操作的代码:
$(function() {
var BERLIN = new google.maps.LatLng(52.520816, 13.410186);
var NEIGBORHOODS = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)];
var map = null;
var marker = null;
var index = 0;
var infoWindow = null;
function createMap() {
return new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: BERLIN,
zoom: 12
});
}
function dropMarker(map, pos) {
return new google.maps.Marker({
map: map,
position: pos,
draggable: false,
animation: google.maps.Animation.DROP
});
}
function changeMarker() {
if (marker) {
infoWindow.close();
marker.setMap(null);
}
var pos = NEIGBORHOODS[index];
marker = dropMarker(map, pos);
infoWindow.setContent('lat: ' + pos.lat() + '<br />' + 'lng: ' + pos.lng());
setTimeout(function () {
infoWindow.open(map, marker);
}, 500);
index = (index + 1) % NEIGBORHOODS.length;
setTimeout(function () {
changeMarker();
}, 2000);
}
map = createMap();
infoWindow = new google.maps.InfoWindow()
changeMarker();
});
请注意 changeMarker() 函数如何完成其工作，然后使用 setTimeout() 再次调用自身。这会设置一个无限循环，其中每两秒调用一次 changeMarker()。
我使用 setTimeout() 将信息窗口的显示延迟半秒，以便在放置完成之前它不会出现。
关于javascript - 谷歌地图 v3 : how to drop markers, 删除，再次循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17225653/