bor*_*per 8 javascript jquery google-maps-api-3 google-geocoding-api
我在这个网站上找到了从邮政编码中获取状态的代码,但我还需要获取城市名称.
这是我获取状态的代码:(注意我也使用jQuery)
var geocoder = new google.maps.Geocoder();
$('.zip').bind('change focusout', function () {
var $this = $(this);
if ($this.val().length == 5) {
geocoder.geocode({ 'address': $this.val() }, function (result, status) {
var state = "N/A";
//start loop to get state from zip
for (var component in result[0]['address_components']) {
for (var i in result[0]['address_components'][component]['types']) {
if (result[0]['address_components'][component]['types'][i] == "administrative_area_level_1") {
state = result[0]['address_components'][component]['short_name'];
// do stuff with the state here!
$this.closest('tr').find('select').val(state);
}
}
}
});
}
});
Mar*_*sen 10
只需添加 result[0]['address_components'][1]['long_name']
所以它会
var geocoder = new google.maps.Geocoder();
$('.zip').bind('change focusout', function () {
var $this = $(this);
if ($this.val().length == 5) {
geocoder.geocode({ 'address': $this.val() }, function (result, status) {
var state = "N/A";
var city = "N/A";
//start loop to get state from zip
for (var component in result[0]['address_components']) {
for (var i in result[0]['address_components'][component]['types']) {
if (result[0]['address_components'][component]['types'][i] == "administrative_area_level_1") {
state = result[0]['address_components'][component]['short_name'];
// do stuff with the state here!
$this.closest('tr').find('select').val(state);
// get city name
city = result[0]['address_components'][1]['long_name'];
// Insert city name into some input box
$this.closest('tr').find('.city').val(city);
}
}
}
});
}
});
我重写了以上解决方案,看起来更优雅:
var zipCode = '48201';
var country = 'United States';
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': zipCode + ',' + country }, function (result, status) {
var stateName = '';
var cityName = '';
var addressComponent = result[0]['address_components'];
// find state data
var stateQueryable = $.grep(addressComponent, function (x) {
return $.inArray('administrative_area_level_1', x.types) != -1;
});
if (stateQueryable.length) {
stateName = stateQueryable[0]['long_name'];
var cityQueryable = $.grep(addressComponent, function (x) {
return $.inArray('locality', x.types) != -1;
});
// find city data
if (cityQueryable.length) {
cityName = cityQueryable[0]['long_name'];
}
}
});
以下是使用googleapis从Zipcode检查城市名称的代码.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var geocoder;
var map;
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
for (var component in results[0]['address_components']) {
for (var i in results[0]['address_components'][component]['types']) {
if (results[0]['address_components'][component]['types'][i] == "administrative_area_level_1") {
state = results[0]['address_components'][component]['long_name'];
alert(results[0]['address_components'][1]['long_name'] + ' , ' + state);
}
}
}
} else {
alert('Invalid Zipcode');
}
});
}
</script>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>