0

これを読んでくれてありがとう...

私はかなり基本的なjavascriptの問題を解決するために、3日間検索と実験を行ってきました。

45個のマーカーでGoogleマップを作成しています。マーカー：

  • MarkerClustererユーティリティを使用してクラスター化されます
  • クリックして情報ウィンドウを開くことができます（それぞれが異なる画像を表示します）
  • ページが読み込まれると、すべてが適切に「ドロップ」されます。

ここまでは順調ですね。

問題は、「setTimeout」関数を適用して、マーカーを（一度にすべてではなく）順番にドロップすることです。私は十数のバリエーションを試しましたが、何も機能しません。

私は完全な初心者です、どんな助けでも大歓迎です！

マップの簡略化されたバージョンは、次の場所で表示できます。

http://www.domatchaworld.com/googlemap6.html

コードは次のとおりです。

var locations = [  
[39.11009, -120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'],
[37.77493, -122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'],
[48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'],
[48.77734, -121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'],
[49.35365, -123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>']
]; 

var map;
var markers = [];
var mc; 
var mcOptions = {
  gridSize: 20,
  maxZoom: 15
};

map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 3,
center: new google.maps.LatLng(31.65338, -40.42969),
mapTypeId: google.maps.MapTypeId.TERRAIN
});

mc = new MarkerClusterer(map, [], mcOptions);

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});

var marker;
var i;

for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    animation: google.maps.Animation.DROP,
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][2]);
      infowindow.open(map, marker);
    }
  })(marker, i));

mc.addMarkers(markers, true);

markers.push(marker); //push local var marker into global array

}
4

1 に答える 1

2

MarkerClusterer一度にすべてのマーカーを追加する代わりに、マーカーの配列を作成してからアニメーション化します (コードをコピーして貼り付け、最後にコメントを追加しました...):

var locations = [
    [39.11009, - 120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'],
    [37.77493, - 122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'],
    [48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'],
    [48.77734, - 121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'],
    [49.35365, - 123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>']
];

var map;
var markers = [];
var mc;
var mcOptions = {
    gridSize: 20,
    maxZoom: 15
};

map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 3,
    center: new google.maps.LatLng(31.65338, - 40.42969),
    mapTypeId: google.maps.MapTypeId.TERRAIN
});

mc = new MarkerClusterer(map, [], mcOptions);

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(map, 'click', function () {
    infowindow.close();
});

var marker;
var i;

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        animation: google.maps.Animation.DROP,
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][2]);
            infowindow.open(map, marker);
        }
    })(marker, i));

    //don't add to cluster yet
    //mc.addMarkers(markers, true);

    markers.push(marker); //push local var marker into global array

}

// now animate and add to cluster
(function animateNextMarker() {
  if (markers.length > 0) {
    mc.addMarker(markers.pop(), true);
    setTimeout(animateNextMarker, 250);
  }
})();

お役に立てれば ：）

于 2012-07-12T13:45:41.937 に答える