我正在尝试获取谷歌地图上点击位置的纬度和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
谢谢。
- 必须在
placeMarker()
的else分支的末尾添加dragend
-事件,在添加侦听器时,在当前位置marker
是undefined
- 在
updateMarkerPosition()
中,设置文本输入的innerHTML
(通常不会有任何效果),改为设置value