0

複数のドラッグ可能なマーカーを Google マップに実装しました。今、最後の座標以外は座標が更新されていないように見えるという問題があります。

間違いはありませんが、マーカー10だけが位置とアドレスを更新します。

var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 10,
    center: new google.maps.LatLng(51.012904492831055, 4.3322019042968805),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

for(var i=0;i<10;i++)
{
        var latLng = new google.maps.LatLng(51.012904492831055, 4.3322019042968805);
        var marker = new google.maps.Marker({
            position: latLng,
            title: 'Point ' + (i+1),
            map: map,
            draggable: true
        });

        google.maps.event.addListener(marker, 'dragstart', function() {
            updateMarkerAddress('Dragging...');
        });

        google.maps.event.addListener(marker, 'drag', function() {
            updateMarkerStatus('Dragging...');
            updateMarkerPosition(marker.getPosition());
        });

        google.maps.event.addListener(marker, 'dragend', function() {
            updateMarkerStatus('Drag ended');
            geocodePosition(marker.getPosition());
        });
}

// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
4

2 に答える 2

2

これは変数スコープの問題でvar markerあり、ループ内のグローバル変数であり、ループを通じて更新されるため、最後の値がループの最後に設定されています。

google.maps.event.addListener関数内ですべてをラップするだけです。つまり、

(function(marker){ // Inside this function 'marker' is a local variable.
    google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
    });

    google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
    });
})(marker); // Pass the 'global' marker variable as an argument
于 2012-07-24T12:33:18.653 に答える
2

イベント、、がトリガーされているときdragstart、変数dragは最後に作成したものにリンクされます。その時までにループはすでに終了しています。dragendmarkerMarker

その状況を回避するには、以下のトリックを試してください。

 //..............
 (function(marker){   //added line
    google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
    });

    google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
    });
 })(marker);   //added line
 //..............

またはthis、リスナーが追加されたマーカーを参照するために使用できます。

 google.maps.event.addListener(marker, 'drag', function() {
      updateMarkerStatus('Dragging...');
      updateMarkerPosition(this/*instead of 'marker'*/.getPosition());
 });

 google.maps.event.addListener(marker, 'dragend', function() {
      updateMarkerStatus('Drag ended');
      geocodePosition(this/*instead of 'marker'*/.getPosition());
 });
于 2012-07-24T12:32:38.933 に答える