web-dev-qa-db-ja.com

Google Maps V3で、ドラッグ可能なマーカーを取得して地図をパンするにはどうすればよいですか？

マーカーをドラッグしているときにマップをパンする方法のV2の例をいくつか見つけました。例： http://www.putyourlightson.net/projects/coordinates

    // create map and add controls
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());        
map.addControl(new GMapTypeControl());

// set centre point of map
var centrePoint = new GLatLng('53.34870686020199', '-6.267356872558594');
map.setCenter(centrePoint, 14); 

// add a draggable marker
var marker = new GMarker(centrePoint, {draggable: true});
map.addOverlay(marker);

// add a drag listener to the map
GEvent.addListener(marker, "dragend", function() {
    var point = marker.getPoint();
    map.panTo(point);
    document.getElementById("latitude").value = point.lat();
    document.getElementById("longitude").value = point.lng();
});

このページは、マーカーがドラッグされている間、「自動パン」しているように見えます。その唯一のイベントリスナーは「ドラッグ」用であることに注意してください。ただし、マーカーがドラッグされている間、そのマップはパンすることを保証します。

私はV3APIで同じことを達成しようとしていますが、成功していません。アイコンをドラッグしているときにmap.panTo（）を呼び出しても、満足のいく結果が得られませんでした： http://www.publicgloucester.com/test.html

function initialize ()
   {
   Gloucester = new google.maps.LatLng (42.6159285, -70.6619888);

   myOptions = 
      {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: Gloucester,
      streetViewControl: false
      }

   map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions);

   marker = new google.maps.Marker ({position: Gloucester, title: "Gloucester, MA"});
   marker.setMap (map);
   marker.setDraggable (true);

   google.maps.event.addListener (marker, 'drag', function (event) 
      {
      // Pan to this position (doesn't work!)
      map.panTo (marker.getPosition());
      });

   }

マップの移動中にマーカーをマップの中央に配置するためのパンは偽物であるため、これが機能しないことは私には理にかなっています。

これを自動的に行うのはV2APIと同じくらい簡単ですか？V3 APIはそうではありませんか？ V3 APIでこの効果を実現するにはどうすればよいですか？

ありがとう。

google-mapsgoogle-maps-api-3google-maps-markers
15
Martin Del Vecchio

Googleはこれを修正しました： http://code.google.com/p/gmaps-api-issues/issues/detail?id=2404

修正の実際は http://www.publicgloucester.com/test2.html で確認できます。 「私が望むことをしない」というコメントは無視してください。そのコメントは廃止されました。

12
Martin Del Vecchio

ドラッグの代わりにドラッグエンドを使用します。コードは、

  google.maps.event.addListener(marker, "dragend", function(event) {

       var point = marker.getPosition();
       map.panTo(point);

        });
19
vbn

聞きたいイベントは、例の「ドラッグ」で使用されているイベントです。「偽物」を少なくするためにできることは、遅延を追加することです。これにより、マップはすぐに更新されるのではなく、マーカーに従います。これを試して：

google.maps.event.addListener(marker, "drag", function(event) {
  var point = marker.getPosition();
  window.setTimeout(function(){
    map.panTo(point);
  }, 100);
});
1
xmarcos

弾むアクションを取り戻すためにこれを実装しようとしましたか？ http://groups.google.com/group/nycjs/browse_thread/thread/259a325fa980e575

0
megan