Draggable标记更新纬度和长字段

我把一些编码放在一起（请看下面），用户进入HTML表单，他们键入一个地址，然后点击“搜索”按钮。完成此操作后，该位置将绘制在Google地图上，Lat和Long co-oridnates会自动输入到我的表单上的相关文本框中。

我想要做的，如果可能的话，标记是可拖动的，因此用户可以微调位置，当他们拖动标记时，我想要Lat和Long字段改变他们的相关的坐标。另外，如果可能的话，我还希望在名为“NearestAddress”的表单上有一个字段，以显示标记被拖动到的最近地址。

我已经设法使标记可拖动，但它们不更新纬度和经度文本框。我也不确定如何添加功能来显示更新的地址，以便将标记拖放到哪里。

(function() { 
// Defining some global variables 
var map, geocoder, myMarker, infowindow; 
window.onload = function() { 
// Creating a new map 
var options = { 
zoom: 3, 
center: new google.maps.LatLng(55.378051,-3.435973), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById('map'), options); 
// Getting a reference to the HTML form 
var form = document.getElementById('LocationSearchForm'); 
// Catching the forms submit event 
form.onsubmit = function() { 
// Getting the address from the text input 
var address = document.getElementById('Address').value; 
// Making the Geocoder call 
getCoordinates(address); 
// Preventing the form from doing a page submit 
return false; 
} 
} 
// Create a function the will return the coordinates for the address 
function getCoordinates(address) { 
// Check to see if we already have a geocoded object. If not we create one 
if(!geocoder) { 
geocoder = new google.maps.Geocoder(); 
} 
// Creating a GeocoderRequest object 
var geocoderRequest = { 
address: address 
} 
// Making the Geocode request 
geocoder.geocode(geocoderRequest, function(results, status) { 
// Check if status is OK before proceeding 
if (status == google.maps.GeocoderStatus.OK) { 
// Center the map on the returned location 
map.setCenter(results[0].geometry.location); 
    // Creating a new marker and adding it to the map 
     var myMarker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location, 
      draggable:true 
     }); 

     document.getElementById('Latitude').value= results[0].geometry.location.lat(); 
     document.getElementById('Longitude').value= results[0].geometry.location.lng(); 

     google.maps.event.addListener(myMarker, 'dragend', function(evt){ 
     document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>'; 
     }); 

     google.maps.event.addListener(myMarker, 'dragstart', function(evt){ 
     document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>'; 
     }); 

     map.setCenter(myMarker.position); 
     myMarker.setMap(map); 

     } 

    }); 

    } 

})();

我是Google地图开发新手，我甚至不确定是否可以实现我想要的功能。我现在一直在研究这个问题几个星期，这让我有点疯狂，所以如果有人能够指出我朝着正确的方向，它会受到欢迎。

许多的感谢和亲切的问候

克里斯

来源

2011-06-13 IRHM

而不是evt.latLng.lat().toFixed(3)你应该只使用myMarker对象，并抓住它的位置。

获取最近的地址并不是那么容易，但需要反向地理编码，说实话，我没有看到这一点。你将不得不为那些没有找到最接近的地址和类似东西的事件做些特殊的事情。

如果你真的想做，虽然有一个web服务，你可以打电话来做到这一点。

来源

2011-06-13 18:03:59

非常感谢您的回复。 innerHTML ='

标记丢弃：当前纬度：'+ myMarker +'当前Lng：'+ myMarker +'

'我已经对我认为需要更改的行进行了修改，即document.getElementById（'current' ;但这似乎并不奏效。正如我所说我对此很新，所以很可能是因为我缺乏经验并没有帮助。请有任何想法吗？非常感谢和亲切的问候。 – IRHM 2011-06-13 18:11:38

对不起，我应该澄清一点。您仍然需要获取myMarker.position.lat（）。你做错了什么是使用evt，这只是运动的事件。不是标记对象。 – 2011-06-14 06:27:40

嗨，我很抱歉再次遇到这个问题，但我仍然不确定我需要做什么。请问你有什么机会可以告诉我我需要改变什么。我怕它必须是白痴证明！非常感谢和亲切的问候。 – IRHM 2011-06-14 15:46:42

Draggable标记更新纬度和长字段

回答

相关问题