javascript - 谷歌地图标记事件 'dragend' 问题

Question

所以我正在尝试构建一个简单的网络应用程序，它从用户那里获取地址并在该地址上放置一个标记。之后，用户可以将标记拖动到另一个位置，地址字段应相应更新。问题是我无法让地址字段在拖尾上自动更新。到目前为止，我所做的最好的事情就是在您单击标记时进行更新，但这是一种糟糕的用户体验。

tl;dr 更改代码，以便“地址”字段在拖尾时更新，而不是在单击时更新。

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