可拖动标记更新纬度和长字段

时间:2011-06-13 17:47:06

标签: google-maps-api-3 draggable google-maps-markers

我想知道是否有人可以帮助我。

我已将一些编码放在一起(请参见下文),用户可以在其中输入HTML表单,输入地址并单击“搜索”按钮。执行此操作后,该位置将绘制在Google地图上,并且Lat和Long联合会自动输入到我的表单上的相关文本框中。

我想做的是,如果可能的话,标记是可拖动的,这样用户可以微调位置,当他们拖动标记时,我想要改变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);

      } 

    });

  }

})();

我是谷歌地图开发的新手,我甚至不确定是否有可能实现我想要的目标。我已经在这个问题上工作了几个星期,这让我有点疯狂,所以如果有人能指出我正确的方向,我会非常感激。

非常感谢和亲切的问候

克里斯

1 个答案:

答案 0 :(得分:1)

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

获取最近的地址并不容易,但需要反向地理编码,说实话,我没有看到这样做的重点。你不得不为那些找不到最近地址和类似东西的情况做出特殊情况。

如果你真的想这样做,虽然有一个网络服务,你可以打电话去做。