Обратное геокодирование с динамической формой - PullRequest
Новая
       39

Обратное геокодирование с динамической формой

0 голосов
/ 18 июня 2011

Я пытался найти способ использовать сервис «Обратное геокодирование» с координатами широты и долготы, поступающими из двух текстовых полей в моей HTML-форме, и я должен признать, что не совсем уверен, что янужно сделать.

Мне удалось сделать это с помощью службы 'Geocode' (см. код ниже), но я просто подумал, сможет ли кто-то указать мне правильное направление, как я мог бы адаптироватьJavascript 'Geocode' У меня есть служба 'Обратное геокодирование'. 

(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 Ответ

1 голос
/ 19 июня 2011

Получив широту и долготу от своей формы, вы делаете что-то вроде этого (для ясности используйте вышеприведенный код в качестве отправной точки): 

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.

...