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>

どうもありがとう。

もう1つ.マーカーが現在設定されているマップエリアを超えてドロップすると、マーカーを表示するためにマップを移動したい.このコードでこれを行うには??

于 2012-05-13T03:30:57.593 に答える