0

マップにマーカーを動的に追加し、以下のリンクのように markerCluster を使用してクラスター化したい: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html シナリオは、ユーザーが私のウェブサイトにアクセスすると、最初の Google マップが表示されます。ユーザーがボタンを押すと、データベースに戻って 100 データを取得し、ユーザーのためにマップに描画します。特に近いのでmarkerClusterを使いたいのですが、どういうわけかうまくいかず、理由がわからず、コンソールにエラーが表示されません（私はchromeのWeb開発者ツールを使用しています）

これが私のjavascriptです。私はjava、javascript、およびjspを使用しています:

$('#addMarkerData').click(function(){
console.log('into addMarkerData click function');
$.get('getphoto.do',{},function(Result){
    var markers = [];
    var image = 'img/location.png';
    for(var i=0; i < 100; i++){
            console.log(Result[i].photoId);
            console.log(Result[i].latitude);
            console.log(Result[i].longitude);
            console.log(Result[i].imgURL);  
              var latLng = new google.maps.LatLng(Result[i].latitude,
                      Result[i].longitude);
              var marker = new google.maps.Marker({
                  animation: google.maps.Animation.DROP,
                  position: latLng,
                  icon: image
              });
              markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
    console.log(markerCluster.getTotalMarkers());
});

});

変数マップは別の .js ファイルで宣言されており、この .js ファイルの前にロードされます

もう1つ、私のコードの最後の行は、console.log(markerCluster.getTotalMarkers())正解（100）を示しています

誰かが私にアドバイスを与えることができれば、非常に感謝しています

4

1 に答える 1

4

MarkerClusterer繰り返し使用できるように、関数の外で作成する必要があります。マップを作成した直後に作成できます。

var map = new google.maps.Map();
var markerCluster = new MarkerClusterer(map);

addMarker()その後、JSON コールバック内でoraddMarkers()メソッドを使用できます。毎回同じマーカー クラスタラーが使用されるため、以前に追加されたマーカーは削除されません。コードの大まかな概要:

$('#addMarkerData').click(function () {
    $.get('getphoto.do', {}, function (Result) {
        var markers = [];
        for (var i = 0; i < Result.length; i++) {
            var marker = new google.maps.Marker({
                animation: google.maps.Animation.DROP,
                position: new google.maps.LatLng(Result[i].latitude, Result[i].longitude),
                icon: 'img/location.png'
            });
            markers.push(marker);
        }
        markerCluster.addMarkers(markers);
        console.log(markerCluster.getTotalMarkers());
    });
});
于 2013-01-19T14:55:12.660 に答える