2

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

1) 一个一个地丢掉标记；

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

3) 放下下一个标记

4）在每个标记中打开信息窗口

5) 重复操作

我一直在尝试扭曲动画代码并尝试将地图设置为 null (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

>

4

1 回答 1

3

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

这是一些执行此操作的代码：

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

于 2013-06-21T04:25:23.097 回答