如何使用拖放动画为多个标记创建Infowindows

时间：2012-05-11 08:34:58

标签： javascript google-maps google-maps-api-3 google-maps-markers

我已经成功编码以一定的间隔删除多个标记，并且知道如何创建多个infowindows而不使用drop动画。但是，我不知道如何使用drop动画创建多个标记的infowindows。我需要一个和我一个因为我是javascript的新手而挣扎着。

<script type="text/javascript">
    var bounds = new google.maps.LatLngBounds ();
    var berlin = new google.maps.LatLng(13.00843, 80.21215);

    var neighborhoods = [ new google.maps.LatLng(13.00843, 80.21215),
     new google.maps.LatLng(13.00881, 80.21143),
     new google.maps.LatLng(13.00861, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00859, 80.21085),
     new google.maps.LatLng(13.00856, 80.21071),
     new google.maps.LatLng(13.00856, 80.21053),
     new google.maps.LatLng(13.00843, 80.21023),
     new google.maps.LatLng(13.00838, 80.20999),
     new google.maps.LatLng(13.00804, 80.20887),
     new google.maps.LatLng(13.00777, 80.207),
     new google.maps.LatLng(13.0076, 80.20554),
     new google.maps.LatLng(13.00701, 80.20469),
     new google.maps.LatLng(13.00532, 80.20192),
     new google.maps.LatLng(13.00388, 80.20111),
     new google.maps.LatLng(13.00238, 80.2005),
     new google.maps.LatLng(13.00189, 80.19991),
     new google.maps.LatLng(13.00192, 80.19675),
     new google.maps.LatLng(13.00011, 80.19431),
     new google.maps.LatLng(12.99835, 80.19217),
     new google.maps.LatLng(12.99555, 80.18887),
     new google.maps.LatLng(12.9911, 80.18111),
     new google.maps.LatLng(12.9874, 80.17626),
     new google.maps.LatLng(12.98264, 80.16883),
     new google.maps.LatLng(12.97428, 80.15462),
     new google.maps.LatLng(12.96853, 80.14983),
     new google.maps.LatLng(12.96691, 80.149),
     new google.maps.LatLng(12.9623, 80.14663),
     new google.maps.LatLng(12.96064, 80.14581),
     new google.maps.LatLng(12.95152, 80.14029),
     new google.maps.LatLng(12.94606, 80.13628),
     new google.maps.LatLng(12.93716, 80.12813),
     new google.maps.LatLng(12.92727, 80.11845),
     new google.maps.LatLng(12.92727, 80.11845),
     new google.maps.LatLng(12.92727, 80.11845),
     new google.maps.LatLng(12.92727, 80.11845),
     new google.maps.LatLng(12.92727, 80.11845),
     new google.maps.LatLng(12.91545, 80.1045),
     new google.maps.LatLng(12.90816, 80.09801),
     new google.maps.LatLng(12.88163, 80.08141),
     new google.maps.LatLng(12.86243, 80.07368),
     new google.maps.LatLng(12.85883, 80.07145),
     new google.maps.LatLng(12.83887, 80.05463),
     new google.maps.LatLng(12.81113, 80.03094),
     new google.maps.LatLng(12.78636, 80.01549),
     new google.maps.LatLng(12.75723, 80.00227),
     new google.maps.LatLng(12.73914, 79.99043),
     new google.maps.LatLng(12.69862, 79.96948),
     new google.maps.LatLng(12.66697, 79.95867),
     new google.maps.LatLng(12.62878, 79.93155),
     new google.maps.LatLng(12.5874, 79.9173),
     new google.maps.LatLng(12.55993, 79.91112),
     new google.maps.LatLng(12.51569, 79.89052),
     new google.maps.LatLng(12.48418, 79.86374),
     new google.maps.LatLng(12.45468, 79.84108),
     new google.maps.LatLng(12.4354, 79.83541),
     new google.maps.LatLng(12.40707, 79.82117),
     new google.maps.LatLng(12.38243, 79.79353),
     new google.maps.LatLng(12.36767, 79.7822),
     new google.maps.LatLng(12.32709, 79.77705),
     new google.maps.LatLng(12.30646, 79.75113),
     new google.maps.LatLng(12.28969, 79.7216),
     new google.maps.LatLng(12.27879, 79.7077),
     new google.maps.LatLng(12.26285, 79.68298),
     new google.maps.LatLng(12.25832, 79.67903),
     new google.maps.LatLng(12.91417, 80.22938),
     new google.maps.LatLng(12.923964, 80.12469),
     new google.maps.LatLng(12.8791617, 80.18394),
     new google.maps.LatLng(13.00843, 80.21215),
     new google.maps.LatLng(13.00843, 80.21215)];



    var markers = [];
    var iterator = 0;

    var map;
    function initialize() {
    var mapOptions = {
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: berlin
    };


    map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
    setMarkers(map, neighbourhoods);


    }

    function drop() {
    for (var i = 0; i < neighborhoods.length; i++) {
      setTimeout(function() {
        addMarker();
      }, i * 1000);


        }
    }



    var image = 'images/car_icon_small.png';
    function addMarker() {
    var marker=markers.push(new google.maps.Marker({
      position: neighborhoods[iterator],
      map: map,
      draggable: false,
    icon: image,
    title: neighborhoodsName[iterator],
      animation: google.maps.Animation.DROP
    }));

    iterator++;
    }

</script>

1 个答案:

答案 0 :(得分：1)

经过长时间的尝试，我解决了我的问题。这就是我所做的：

<script type="text/javascript">
var bounds = new google.maps.LatLngBounds ();
var berlin = new google.maps.LatLng(13.00843, 80.21215);

var neighborhoods = [ new google.maps.LatLng(13.00843, 80.21215),
 new google.maps.LatLng(13.00881, 80.21143),
 new google.maps.LatLng(13.00861, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00859, 80.21085),
 new google.maps.LatLng(13.00856, 80.21071),
 new google.maps.LatLng(13.00856, 80.21053),
 new google.maps.LatLng(13.00843, 80.21023),
 new google.maps.LatLng(13.00838, 80.20999),
 new google.maps.LatLng(13.00804, 80.20887),
 new google.maps.LatLng(13.00777, 80.207),
 new google.maps.LatLng(13.0076, 80.20554),
 new google.maps.LatLng(13.00701, 80.20469),
 new google.maps.LatLng(13.00532, 80.20192),
 new google.maps.LatLng(13.00388, 80.20111),
 new google.maps.LatLng(13.00238, 80.2005),
 new google.maps.LatLng(13.00189, 80.19991),
 new google.maps.LatLng(13.00192, 80.19675),
 new google.maps.LatLng(13.00011, 80.19431),
 new google.maps.LatLng(12.99835, 80.19217),
 new google.maps.LatLng(12.99555, 80.18887),
 new google.maps.LatLng(12.9911, 80.18111),
 new google.maps.LatLng(12.9874, 80.17626),
 new google.maps.LatLng(12.98264, 80.16883),
 new google.maps.LatLng(12.97428, 80.15462),
 new google.maps.LatLng(12.96853, 80.14983),
 new google.maps.LatLng(12.96691, 80.149),
 new google.maps.LatLng(12.9623, 80.14663),
 new google.maps.LatLng(12.96064, 80.14581),
 new google.maps.LatLng(12.95152, 80.14029),
 new google.maps.LatLng(12.94606, 80.13628),
 new google.maps.LatLng(12.93716, 80.12813),
 new google.maps.LatLng(12.92727, 80.11845),
 new google.maps.LatLng(12.92727, 80.11845),
 new google.maps.LatLng(12.92727, 80.11845),
 new google.maps.LatLng(12.92727, 80.11845),
 new google.maps.LatLng(12.92727, 80.11845),
 new google.maps.LatLng(12.91545, 80.1045),
 new google.maps.LatLng(12.90816, 80.09801),
 new google.maps.LatLng(12.88163, 80.08141),
 new google.maps.LatLng(12.86243, 80.07368),
 new google.maps.LatLng(12.85883, 80.07145),
 new google.maps.LatLng(12.83887, 80.05463),
 new google.maps.LatLng(12.81113, 80.03094),
 new google.maps.LatLng(12.78636, 80.01549),
 new google.maps.LatLng(12.75723, 80.00227),
 new google.maps.LatLng(12.73914, 79.99043),
 new google.maps.LatLng(12.69862, 79.96948),
 new google.maps.LatLng(12.66697, 79.95867),
 new google.maps.LatLng(12.62878, 79.93155),
 new google.maps.LatLng(12.5874, 79.9173),
 new google.maps.LatLng(12.55993, 79.91112),
 new google.maps.LatLng(12.51569, 79.89052),
 new google.maps.LatLng(12.48418, 79.86374),
 new google.maps.LatLng(12.45468, 79.84108),
 new google.maps.LatLng(12.4354, 79.83541),
 new google.maps.LatLng(12.40707, 79.82117),
 new google.maps.LatLng(12.38243, 79.79353),
 new google.maps.LatLng(12.36767, 79.7822),
 new google.maps.LatLng(12.32709, 79.77705),
 new google.maps.LatLng(12.30646, 79.75113),
 new google.maps.LatLng(12.28969, 79.7216),
 new google.maps.LatLng(12.27879, 79.7077),
 new google.maps.LatLng(12.26285, 79.68298),
 new google.maps.LatLng(12.25832, 79.67903),
 new google.maps.LatLng(12.91417, 80.22938),
 new google.maps.LatLng(12.923964, 80.12469),
 new google.maps.LatLng(12.8791617, 80.18394),
 new google.maps.LatLng(13.00843, 80.21215),
 new google.maps.LatLng(13.00843, 80.21215)];



var markers = [];
var iterator = 0;

var map;
function initialize() {
var mapOptions = {
  zoom: 10,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: berlin
};


map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
setMarkers(map, neighbourhoods);


}

function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
  setTimeout(function() {
    addMarker();
  }, i * 1000);


    }
}



var image = 'images/car_icon_small.png';
function addMarker() {
var marker=new google.maps.Marker({
  position: neighborhoods[iterator],
  map: map,
  draggable: false,
icon: image,
title: neighborhoodsName[iterator],
  animation: google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
        content:'Hello World'
      });


      google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
      });
     markers.push(marker);

iterator++;
}


</script>

非常感谢。

还有一件事。当标记超出当前设置的地图区域时，我希望地图移动以显示标记。如何使用此代码执行此操作？

相关问题
最新问题