谷歌地圖標記事件'dragend'問題

Question

所以我想建立一個簡單的網絡應用程序，從用戶的地址，並在該地址上放置一個標記。之後，用戶可以將標記拖動到另一個位置，並且地址字段應該相應地更新。問題是我無法讓地址字段在dragend上自動更新。到目前爲止，我所做的最好的工作是在點擊標記時進行更新，但這是一種糟糕的用戶體驗。

tl; dr更改代碼以使「地址」字段在dragend上更新，而不是在點擊上更新。

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

地理編碼異步運行時，您必須在響應到達時更新輸入，而不是立即。

可能的方法來實現它：

變化

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

    }); 

...到

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

    }); 

現在你有當響應到達時可以執行的回調函數。

要叫它改變

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