谷歌地图v3:如何放下标记，删除，循环再次

google maps v3: how to drop markers, remove, loop again

本文关键字：删除 循环 下标 v3 何放 谷歌地图      更新时间：2023-09-26

我一直在学习谷歌地图，我想完成以下目标:

1)逐个放下标记;

2)删除最后一个标记(所以只有一个在视口中)

3)放下下一个标记

4)在每个标记处打开信息窗口

5)重复操作

我一直试图扭曲动画代码并试图设置地图空(setMap(null))，但在调用drop函数后没有成功。有什么建议吗?底线:有这样的东西。当然，这有一个很大的额外的困难步骤，即从数据库中提取数据。

下面是代码。任何帮助都将不胜感激。

 <!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()延迟显示信息窗口的半秒，所以它不会出现，直到下降完成。

jsfiddle演示

相关文章：