Question

因此，我正在尝试构建一个简单的Web应用程序，该应用程序从用户获取地址并在该地址上放置标记。之后，用户可以将标记拖动到另一个位置，并且地址字段应该相应地更新。问题是我无法在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);
  });
}

关于事件'dragend'问题的谷歌地图标记

1 个答案: