4

現在、Google マップ (api v3) にこのリスナー イベントがあります。

google.maps.event.addListener(Map, 'center_changed', FixedMarkerInCenter);
google.maps.event.addListener(Map, 'zoom_changed', FixedMarkerInCenterZoom);
google.maps.event.addListener(Map, 'dragend', FindReverseGeocode });

問題は、「dragend」イベントが複数回 (少なくとも 4 回) 発生し、関数「FindReverseGeocode」が何度も発生することです。誰も問題を知っていますか？

4

2 に答える 2

5

確かに、これはかなり厄介ですが、まだ絶望しないでください。簡単なJavaScriptで修正できます。

map.dragInProgress = false; //adding flag to already existing map object to keep DOM clean
google.maps.event.addListener(map, 'dragend', function() {
  if(map.dragInProgress == false) { //only first shall pass
    map.dragInProgress = true;
    window.setTimeout(function() {
        console.log('Note how you will see this console message only once.');
        //cast your logic here
        map.dragInProgress = false; //reset the flag for next drag
    }, 1000);
  }
});

つまり、これにより、ドラッグエンドイベントを1秒に1回だけ受信できます。スクリプトがロジックの途中で終了しないことを確認してください。そうしないと、最初のドラッグが最後のドラッグになります。try / catch/finallyを使用してそれを克服できます。楽しみ！

于 2012-12-18T19:30:49.977 に答える
-1

私は自分のコメントを支持しますが、これはcenter_changed(マーカーをdragend使用して) ジオコーダーを使用して実装する基本的なマップです。

ここで、IE9、Chrome 19、および Firefox 13 では、dragendイベントはドラッグごとに 1 回だけ発生します。center_changedドラッグが完了していなくても、 が何度も発生していることに気付くでしょう。これが、あなたのFindReverseGeocodeメソッドが で呼び出されていると私が信じている理由FixedMarkerInCenterです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript"></script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var map;
var geocoder;

function initialize()
{
    var latlng = new google.maps.LatLng(47.6059399181561, 14.747812500000007);
    map = new google.maps.Map(document.getElementById('map'), {
      zoom:6,
      center:latlng,
      mapTypeId:google.maps.MapTypeId.HYBRID
    });

    google.maps.event.addListener(map, 'center_changed', placeMarker);
    google.maps.event.addListener(map, 'dragend', reverseLookup);

    geocoder = new google.maps.Geocoder();
}

function placeMarker()
{
    var center = map.getCenter();
    marker = new google.maps.Marker({
      map:map,
      position: center
    });
}

function reverseLookup()
{
    geocoder.geocode({'latLng': map.getCenter()}, function(results, status)
    {
      if (status == google.maps.GeocoderStatus.OK)
      {
        document.getElementById('area').value = 
        results[results.length-1].formatted_address + " " +
        map.getCenter() + "\r\n" + document.getElementById('area').value;
      }
    });
}

</script>
<body onLoad="initialize()">
<div id="map" style="width: 800px; height: 350px;"></div>
<textarea id='area' cols='80' rows='5'></textarea>
</body>
</html>
于 2012-06-21T17:22:21.910 に答える