get city name from longitude and latitude using google geocoding api jquery

问题

I want to get city name from longitude and latitude. I am using following code but it is returning the entire address with city name, postal code, province and country. I just want only city name.

     $.ajax({ url:'http://maps.googleapis.com/maps/api/geocode/json?latlng='+position.coords.latitude+','+position.coords.longitude+'&sensor=true',
               success: function(data){
               alert(data.results[4].formatted_address);

               }
               });

Please see the result from geocoding

{
           "long_name" : "Vancouver",
           "short_name" : "Vancouver",
           "types" : [ "locality", "political" ]
        },

回答1:

formatted_address is always going to return you a full address string, due to the nature of the datatype from the API. You need to directly reference the locality type in the address_components array.

Google Maps Geocoding API

So for example, you need to search through the returned address_components array for the locality type:

for (var i = 0; i < data.results[4].address_components.length; i++) {
    for (var j = 0; j < data.results[4].address_components[i].types.length; j++) {
        if(data.results[4].address_components[i].types[j] == 'locality') {
            var city_name = data.results[4].address_components[i].long_name;
            alert(city_name);
        }
    }
}

回答2:

I ran into an issue where not all localities are in results[4] so I looped through all.

url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=true";
$.ajax(url).done(function(data) {
    for (var i = 0; i < data.results.length; i++) {
        for (var j = 0; j < data.results[i].address_components.length; j++) {
            for (var k = 0; k < data.results[i].address_components[j].types.length; k++) {
                if (data.results[i].address_components[j].types[k] === 'locality') {
                    var city_name = data.results[i].address_components[j].long_name;
                }
            }
        }
    }
}

NOTE: This is also using update jQuery AJAX syntax since the original post..

回答3:

You need to check some variables to ensure that code will work for every positions, even if locality/city is not present:

var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+','+longitude+'&sensor=false'

$.ajax({
    dataType: "json",
    url: url,
    async: false,
    scriptCharset: "utf-8",
    contentType: "application/json; charset=utf-8",
    success: function(json) 
    {
        var found_city = false;
        if (json && json.results.length > 0)
        {
            for (var k=0; k < json.results.length; k++ ) {                    
                if (json.results[k].address_components) {
                    for (var i = 0; i < json.results[k].address_components.length; i++) {
                        if (json.results[k].address_components[i]) {
                            for (var j = 0; j < json.results[k].address_components[i].types.length; j++) {
                                if(json.results[k].address_components[i].types[j] == 'locality') {
                                    var city_name = json.results[k].address_components[i].long_name;
                                    alert(city_name);
                                    found_city = true
                                }
                            }
                        }
                    }
                }
            }
         }
        if (!found_city) {
            alert("City not found!");
        }
    }
})
.fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    alert("Request Failed: " + err );
});  

来源：https://stackoverflow.com/questions/14083871/get-city-name-from-longitude-and-latitude-using-google-geocoding-api-jquery