我想在我的网站上添加一个功能,客户可以在其中输入他们的邮政编码,它会自动使用谷歌地理编码或开源/必应等价物查找他们的地址。
有没有人有任何示例代码或知道我可以在哪里执行此操作的好指南?
如果使用 jQuery 更好:)
提前谢谢了
达伦
我想在我的网站上添加一个功能,客户可以在其中输入他们的邮政编码,它会自动使用谷歌地理编码或开源/必应等价物查找他们的地址。
有没有人有任何示例代码或知道我可以在哪里执行此操作的好指南?
如果使用 jQuery 更好:)
提前谢谢了
达伦
使用 jQuerygetJSON
和谷歌的 API - http://codepen.io/seanjacob/pen/wfcHB
$('#submit').click(function(){
//Get Postcode
var number = $('#number').val();
var postcode = $('#postcode').val().toUpperCase();;
//Get latitude & longitude
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + postcode + '&key=[[YOUR_API_KEY]]', function(data) {
var lat = data.results[0].geometry.location.lat;
var lng = data.results[0].geometry.location.lng;
//Get address
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + lng + '&key=[[YOUR_API_KEY]]', function(data) {
var address = data.results[0].address_components;
var street = address[1].long_name;
var town = address[2].long_name;
var county = address[3].long_name;
//Insert
$('#text').text(number + ', ' + street + ', ' + town + ', ' + county + ', ' + postcode);
});
});
});
除非您使用的是 Google Maps API for Business,否则您每天只能收到 2,500 个地理位置请求。由于此脚本每次运行发出两个请求,因此每天要查找 1,250 个邮政编码。
我现在实际上正在开发一个使用 GeoCoding 的 Google Maps 应用程序……这是我的第一个,所以我一直非常依赖 Google Maps API。以下是帮助您入门的链接:
http://code.google.com/apis/maps/documentation/javascript/basics.html - 一般 API 的基本起点。
在左侧栏中查看教程、地理编码(或在教程中途点击地理编码链接)和代码示例。
所有这些都让我到达了我需要开始的地方。
祝你好运!
莱兰多
感谢 seanjacob 的回答让我更深入地研究。address_components 中返回的结果并不总是相同的类型,即索引 1 并不总是保存街道名称,因此最好检查 address_components[n].types[0] 中返回的值以确定它的地址字段类型包含。
另请注意,您现在应该使用 https 调用 Google 的 API,并且您需要指定您的 API 密钥。
这是脚本:
function getAddress() {
//Get Postcode
var number = $('#HouseNumber').val();
var postcode = $('#PostCode').val().toUpperCase();;
var address_1 = '';
var address_2 = '';
var town = '';
var county = '';
var pcode = '';
var region = '';
var country = '';
//Get Address
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + postcode + '&sensor=false&key=[YOUR API KEY IN HERE]', function (data) {
// Format/Find Address Fields
var address = data.results[0].address_components;
// Loop through each of the address components to set the correct address field
$.each(address, function () {
var address_type = this.types[0];
switch (address_type) {
case 'route':
address_1 = number + ' ' + this.long_name;
break;
case 'locality':
address_2 = this.long_name;
break;
case 'postal_town':
town = this.long_name;
break;
case 'administrative_area_level_2':
county = this.long_name;
break;
case 'administrative_area_level_1':
region = this.long_name;
break;
case 'country':
country = this.long_name;
break;
}
});
// Sometimes the county is set to the postal town so set to empty if that is the case
if (county === town) {
county = '';
}
// Display the results
$('#address_1').text(address_1);
$('#address_2').text(address_2);
$('#town').text(town);
$('#county').text(county);
$('#postcode').text(postcode);
$('#region').text(region);
$('#country').text(country);
});
}
这是调用该函数的页面
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-2 control-label"><label for="HouseNumber">House No.</label></div>
<div class="col-md-10">
<input type="text" id="HouseNumber" name="HouseNumber" />
</div>
</div>
<div class="form-group">
<div class="col-md-2 control-label"><label for="PostCode">Post Code</label></div>
<div class="col-md-10">
<input type="text" id="PostCode" name="PostCode" />
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 acc-centre"> </div>
<div class="col-md-4 acc-centre"><input type="button" class="btn btn-primary btn-lg" value="Lookup" onclick="getAddress()"></div>
<div class="col-md-4 acc-centre"> </div>
</div>
<div class="row">
<div class="col-md-12 acc-centre">
<span id="address_1"></span><br />
<span id="address_2"></span><br />
<span id="town"></span><br />
<span id="county"></span><br />
<span id="postcode"></span><br />
<span id="region"></span><br />
<span id="country"></span><br />
</div>
</div>
</div>