google maps marker auf Ereignis 'dragend' Ausgabe

Question

Also versuche ich eine einfache Web-App zu bauen, die die Adresse vom Benutzer nimmt und einen Marker auf diese Adresse setzt. Danach kann der Benutzer den Marker an einen anderen Ort ziehen und das Adressfeld sollte entsprechend aktualisiert werden. Das Problem ist, dass ich das Adressfeld nicht automatisch auf dragend aktualisieren kann. Das Beste, was ich bisher getan habe, ist ein Update, wenn Sie auf den Marker klicken, aber das ist eine schreckliche Benutzererfahrung.

tl; dr Ändern Sie den Code, so dass das "Adresse" -Feld auf dragend aktualisiert wird und nicht auf klicken.

var geocoder = new google.maps.Geocoder(); 
var map; 
var marker; 
var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150, 50) 
}); 


function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(37.9839, 23.7294); 
    var mapOptions = { 
    zoom: 16, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 



    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    google.maps.event.addListener(map, 'click', function() { 
    infowindow.close(); 
    }); 
} 
function geocodePosition(pos) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     marker.formatted_address = responses[0].formatted_address; 
    } else { 
     marker.formatted_address = 'Cannot determine address at this location.'; 
    } 
    infowindow.setContent("<b>" + marker.formatted_address + "</b>" + "<br> Drag the marker and click on it to update the address field!"); 
    infowindow.open(map, marker); 
    }); 
} 

function codeAddress() { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({ 
    'address': address 
    }, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     if (marker) { 
     marker.setMap(null); 
     if (infowindow) infowindow.close(); 
     } 
     marker = new google.maps.Marker({ 
     map: map, 
     draggable: true, 
     position: results[0].geometry.location 
     }); 
     google.maps.event.addListener(marker, 'dragend', function() { 
     geocodePosition(marker.getPosition()); 

     }); 
     google.maps.event.addListener(marker, 'click', function() { 
     newAddress = marker.formatted_address; 
     document.getElementById("address").value = newAddress; 
     if (marker.formatted_address) { 
      infowindow.setContent("<b>" + marker.formatted_address + "</b>" + "<br> Drag the marker and click on it to update the address field!"); 

     } else { 
      infowindow.setContent("<b>" + address + "</b>" + "<br> Drag the marker and click on it to update the address field!"); 
     } 
     infowindow.open(map, marker);  
     }); 
     google.maps.event.trigger(marker, 'click'); 

    } 
else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, "load", initialize); 

Answer 1

Geocodierung läuft asynchron, Sie müssen die Eingabe aktualisieren, wenn die Antwort eintrifft, nicht sofort.

Möglicher Ansatz, es zu erreichen:

Änderung

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

    }); 

... zu

google.maps.event.addListener(marker, 'dragend', function() { 
    var that=this; 
    geocodePosition(that.getPosition(), 
        function(){ 
         google.maps.event.trigger(that, 'click'); 
        }); 

    }); 

jetzt können Sie einen Rückruf-Funktion, die ausgeführt werden, wenn die Antwort eintrifft.

es

function geocodePosition(pos) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     marker.formatted_address = responses[0].formatted_address; 
    } else { 
     marker.formatted_address = 'Cannot determine address at this location.'; 
    } 
    infowindow.setContent("<b>" + marker.formatted_address + "</b>" + "<br> Drag the marker and click on it to update the address field!"); 
    infowindow.open(map, marker); 
    }); 
} 

ändern nennen

... zu

function geocodePosition(pos,callback) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     marker.formatted_address = responses[0].formatted_address; 
    } else { 
     marker.formatted_address = 'Cannot determine address at this location.'; 
    } 
    infowindow.setContent("<b>" + marker.formatted_address + "</b>" + "<br> Drag the marker to update the address field!"); 
    callback();//<--this will trigger the marker-click 
    infowindow.open(map, marker); 
    }); 
}