0

我已经成功编码以在特定间隔放置多个标记，并且还知道如何在没有放置动画的情况下创建多个信息窗口。但是，我不知道如何为具有放置动画的多个标记创建信息窗口。我需要两者合二为一，我正在努力解决这个问题因为我是 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>
4

1 回答 1

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>

多谢。

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

于 2012-05-13T03:30:57.593 回答