使用动态形式进行反向地理编码

Question

我一直在尝试找到一种方法来使用“反向地理编码”服务，其中纬度和经度坐标来自我的 HTML 表单上的两个文本框，我必须承认我不太确定我要做什么需要做的。

我已经设法使用“地理编码”服务（见下面的代码）来做到这一点，但我只是想知道是否有人能够指出我如何调整“地理编码”javascript的正确方向我必须'反向地理探测'服务。

(function Geocode() {

    // This is defining the global variables
    var map, geocoder, myMarker;

    window.onload = function() {

        //This is creating the map with the desired options
        var myOptions = {
            zoom: 5,
            center: new google.maps.LatLng(55.378051,-3.435973),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.BOTTOM
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.ZOOM_PAN,
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            }
        };

        map = new google.maps.Map(document.getElementById('map'), myOptions);

        // This is making the link with the 'Search For Location' HTML form
        var form = document.getElementById('SearchForLocationForm');

        // This is catching the forms submit event
        form.onsubmit = function() {

            // This is getting the Address from the HTML forms 'Address' text box
            var address = document.getElementById('GeocodeAddress').value;

            // This is making the Geocoder call
            getCoordinates(address);

            // This is preventing the form from doing a page submit
            return false;
        }
    }

    // This creates the function that will return the coordinates for the address
    function getCoordinates(address) {

        // This checks to see if there is already a geocoded object. If not, it creates one
        if(!geocoder) {
            geocoder = new google.maps.Geocoder();
        }

        // This is creating a GeocoderRequest object
        var geocoderRequest = {
            address: address
        }

        // This is making the Geocode request
        geocoder.geocode(geocoderRequest, function(results, status) {

            // This checks to see if the Status is 'OK 'before proceeding
            if (status == google.maps.GeocoderStatus.OK) {

                // This centres the map on the returned location
                map.setCenter(results[0].geometry.location);

                // This creates a new marker and adds it to the map
                var myMarker = new google.maps.Marker({
                    map: map, 
                    zoom: 12,
                    position: results[0].geometry.location,
                    draggable:true
                });

                //This fills out the 'Latitude' and 'Longitude' text boxes on the HTML form
                document.getElementById('Latitude').value=  results[0].geometry.location.lat();
                document.getElementById('Longitude').value=  results[0].geometry.location.lng();

                //This allows the marker to be draggable and tells the 'Latitude' and 'Longitude' text boxes on the HTML form to update with the new co-ordinates as the marker is dragged
                google.maps.event.addListener(     
                    myMarker,     
                    'dragend',     
                    function() {         
                        document.getElementById('Latitude').value = myMarker.position.lat();         
                        document.getElementById('Longitude').value = myMarker.position.lng(); 

                        var point = myMarker.getPosition();
                        map.panTo(point);   
                    } 
                ); 
            }
        } 
        )
    }
})();

更新

首先，非常感谢您发布的代码以及您去查看 Google 文档的建议。

根据您的建议，以及我从其他文档中获取的内容，我提出了以下内容。但是，当我单击提交按钮时，什么也没有发生，就好像没有附加命令一样。我没有收到任何错误消息，并且我已检查以确保我已将代码链接到正确的字段名，并且一切似乎都正常。我只是想知道，如果您或其他任何人可以看看它，告诉我哪里出错了，是否有可能。

非常感谢和亲切的问候

(function ReverseGeocode() {

    var form, geocoderRequest, latlng, myMarker, point;

    window.onload = function() {

        //This is creating the map with the desired options
        var myOptions = {
            zoom: 5,
            center: new google.maps.LatLng(55.378051,-3.435973),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.BOTTOM
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.ZOOM_PAN,
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            }
        };

        map = new google.maps.Map(document.getElementById('map'), myOptions);

        var latlng = new google.maps.LatLng('Latitude', 'Longitude');

        // This is making the Geocode request
        geocoder.geocode({'LatLng': latlng}, function(results, status) {  

            if (status == google.maps.GeocoderStatus.OK) {                    
                if (results[1]) {           
                    map.setZoom(11);          
                    var myMarker = new google.maps.Marker({               
                        position: results[0].geometry.location, 
                        map: map  
                    });
                    //This fills out the 'Address' text boxe on the HTML form
                    document.getElementById('Address').value=  results[0].geometry.location.latlng();

                    var point = myMarker.getPosition();
                    map.panTo(point);   
                } 
            }
        }
)}})

Answer 1

一旦您从表单中获得纬度和经度，您就可以执行以下操作（为了清楚起见，使用上面的代码作为起点）：

var latlng = new google.maps.LatLng(latitudeFromForm,longitudeFromForm);

// This is creating a GeocoderRequest object
var geocoderRequest = {
    'latlng':latlng
}

// This is making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {

// This checks to see if the Status is 'OK 'before proceeding
if (status == google.maps.GeocoderStatus.OK) {
    // Do stuff with the result here
}

如果您还没有阅读它，您可能需要阅读http://code.google.com/apis/maps/documentation/javascript/services.html#ReverseGeocoding 的反向地理编码部分。