动态表格的反向地理编码

时间:2011-06-18 19:26:42

标签: api google-maps-api-3 reverse-geocoding

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

我已经设法通过'Geocode'服务(见下面的代码)做到了这一点,但我只是想知道是否有人能够指出我正确的方向我如何调整'Geocode'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);   
                } 
            }
        }
)}})

1 个答案:

答案 0 :(得分: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的反向地理编码部分。