Question

我正在尝试获取Google地图上点击位置的lat和lng，然后我会将其存储在数据库中。我已经到了可以点击地图位置并填写表单字段的位置，但我还希望能够将标记拖放到新位置并更新dragend事件中的表单字段。知道怎么做到这一点吗？

HTML：

<div id="container">
  <div class="row-fluid">
    <div class="span10 offset1">
      <div id="holyMapDiv"></div>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span10 offset1">
      <div class="bradyRules">
        <div>Lattitude: <span id="latspan"></span></div>
        <div>Longitude: <span id="lngspan"></span></div>
        <div>Lat Lng: <span id="latlong"></span></div>
        <div>Lat Lng on click: 
        <input type="text" id="latlongclicked"></input></div>
      </div>
    </div>
  </div>
</div>

JavaScript：

var map;
var marker;

function updateMarkerPosition(latLng) {
  document.getElementById('latlongclicked').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function mapa()
{
  var opts = {'center': new google.maps.LatLng(39.73757, -104.98472), 'zoom':8, 'mapTypeId': google.maps.MapTypeId.TERRAIN, draggableCursor: 'crosshair'}
    map = new google.maps.Map(document.getElementById('holyMapDiv'),opts);

  google.maps.event.addListener(map,'click',function(event) {
    document.getElementById('latlongclicked').value = event.latLng.lat() + ', ' + event.latLng.lng();
    placeMarker(event.latLng);
  })

  google.maps.event.addListener(map,'mousemove',function(event) {
    document.getElementById('latspan').innerHTML = event.latLng.lat();
    document.getElementById('lngspan').innerHTML = event.latLng.lng();
    document.getElementById('latlong').innerHTML = event.latLng.lat() + ', ' +     event.latLng.lng();
  });

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

}

function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map,
      animation: google.maps.Animation.DROP,
      draggable: true
    });
  }
}

window.onload = mapa

谢谢。

Answer 1

您必须在dragend的else分支末尾添加placeMarker() - 事件，当您添加侦听器时，当前位置marker为undefined < / LI>
在updateMarkerPosition()中设置了文本输入的innerHTML（通常没有任何效果），设置value而不是

如何让Google Maps API v3监听dragend事件并在drop上填充表单字段？

1 个答案: