可拖动标记以更新经纬度字段

Question

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

我已经将一些编码放在一起（请参见下文），用户可以进入 HTML 表单，输入地址并单击“搜索”按钮。执行此操作后，该位置将绘制在 Google 地图上，并且经纬度坐标自动输入到我表单上的相关文本框中。

如果可能的话，我想做的是让标记可拖动，以便用户可以微调位置，并且当他们拖动标记时，我希望改变 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 地图开发的新手，我什至不确定是否可以实现我想要的。我已经为此工作了几个星期，这让我有点发疯，所以如果有人能指出我正确的方向，我将不胜感激。

非常感谢和亲切的问候

克里斯

Answer 1

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

获取最近的地址并不容易，但需要反向地理编码，老实说，我看不出这样做的意义。对于无法找到最近地址之类的情况，您必须制定特殊情况。

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