Question

我一直在研究谷歌地图，我想实现以下目标：

1）逐个丢弃标记;

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

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

＆GT;

Answer 1

您是否只想一次显示一个标记？

以下是一些代码：

$(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 demo

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

1 个答案: