2010-07-23 26 views
15

He encontrado varios ejemplos de V2 sobre cómo desplazar el mapa mientras se arrastra un marcador. Por ejemplo: http://www.putyourlightson.net/projects/coordinatesEn Google Maps V3, ¿cómo puedo obtener un marcador arrastrable para recorrer el mapa?

// 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(); 
}); 

Esta página parece "auto-pan", mientras que el marcador está siendo arrastrado; tenga en cuenta que su único oyente de eventos es para "dragend". Pero te aseguro que ese mapa se desplaza mientras se arrastra el marcador.

Estoy tratando de lograr lo mismo con la API V3, sin ningún éxito. Incluso he intentado llamar map.panTo() mientras que el icono está siendo arrastrado, con resultados poco satisfactorios: 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()); 
     }); 

    } 

Tiene sentido para mí que esto no funcionaría, ya que en horizontal para colocar el marcador en el centro de el mapa, mientras el mapa se mueve, es falso.

¿Es tan simple como la API V2 hacer esto automáticamente, mientras que la API V3 no? ¿Cómo puedo lograr este efecto con la API V3?

Gracias.

+0

He estado hurgando, y parece que esta característica se eliminó en la transición V2 -> V3. No puedo encontrar ninguna palabra oficial, pero parece ser lo que sucedió. Bummer. –

+0

FYI - http://code.google.com/p/gmaps-api-issues/issues/detail?id=2404 –

Respuesta

19

use dragend en lugar de arrastre. El código será,

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

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

     }); 
+0

Este código "funciona", pero no logra lo que quiero. Este código muestra el mapa cuando se lanza el marcador. Quiero que el mapa se desplace mientras el fabricante está liberando, como fue el comportamiento automático en la API v2. He publicado su ejemplo en http://www.publicgloucester.com/test2.html –

1

El evento que desea escuchar es la utilizada en el ejemplo "arrastre", lo que puede hacer para que se vea menos "falsa" es añadir un retraso, por lo que los mapas sigue el marcador en lugar de ser actualizado inmediatamente. Intente esto:

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

Esto tiene el mismo problema que mi código original; el marcador y la mano divergen, y no se desplaza correctamente. En otras palabras, el marcador no muestra automáticamente el mapa como solía hacerlo en v2, lo que apesta. ¡Gracias! –

+0

He realizado algunas investigaciones y la propiedad 'dragCrossMove' se ha eliminado efectivamente en v3, sin reemplazo actual. La opción animosa parece haber desaparecido también. – xmarcos

Cuestiones relacionadas