[英]google maps marker on event 'dragend' issue
So I'm trying to build a simple web app that takes the address from the user and places a marker on that address. 因此,我正在尝试构建一个简单的Web应用程序,该应用程序将从用户的地址获取并在该地址上放置标记。 After that, the user can drag the marker to another location and the address field should update accordingly. 之后,用户可以将标记拖动到另一个位置,并且地址字段应相应更新。 The problem is I cannot get the address field to update automatically on dragend. 问题是我无法获得地址字段在Dragend上自动更新。 The best I have done so far is to update when you click the marker but this is a horrible user experience. 到目前为止,我所做的最好的事情就是单击标记时进行更新,但这是一种糟糕的用户体验。
tl;dr change the code so that the "address" field gets updated on dragend and not on click. tl; dr更改代码,以使“地址”字段在Dragend而不是Click上得到更新。
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);
geocoding runs asynchronously, you must update the input when the response arrives, not immediately. 地理编码异步运行,您必须在响应到达时立即更新输入,而不是立即更新。
Possible approach to achieve it: 实现它的可能方法:
change 更改
google.maps.event.addListener(marker, 'dragend', function() {
geocodePosition(marker.getPosition());
});
...to ...至
google.maps.event.addListener(marker, 'dragend', function() {
var that=this;
geocodePosition(that.getPosition(),
function(){
google.maps.event.trigger(that, 'click');
});
});
now you have a callback-function which may be executed when the response arrives. 现在您有了一个回调函数,可以在响应到达时执行该函数。
To call it change 称之为改变
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);
});
}
...to ...至
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);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.