如何讓Google Maps API v3偵聽dragend事件並在drop上填充表單域？

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

1. ，你必須在其他分支的placeMarker()末尾添加dragend -event，在當前位置是undefined當您添加監聽
2. 在updateMarkerPosition()您設置一個文本輸入的innerHTML （通常不會有什麼影響），請設置value而不是