小编一想，这个可以有哇，就开始想怎么实现，后来在一个国外的博客上还真找到了一篇这样的文章，小编根据这篇文章实现了一遍，过程不算太难，本着有福共享的原则，将实现过程分享给大家。
https://conversionpirate.com/shopify-checkout-address-autocomplete-google-api/ ——Conversion Pirate
先上个效果图：
Shopify后台对应设置
01
进入谷歌开发者平台，如果没有账号，需注册谷歌账号，再新建一个项目。
在整个注册以及创建的过程中，可能会出现需要绑定信用卡的情况，但是并不会需要消费，无妨。
02
在谷歌开发者后台，选定刚刚创建的项目，开通API服务。
在搜索框中搜索Places，选中Places API，并启用。
回到后台首页，搜索Maps Javascript API，按照Places API中的启用过程，开启Maps Javascript API。
上述两个API启动完毕中，在API选项中，会出现2个使用中的API。
03
在已经使用的API列表中，选中Places API，点击凭据，在创建凭据的下拉框中选择API密钥选项，密钥创建成功。
点击密钥编辑，选择密钥可使用的API范围，选中Places API以及Maps Javascript API，点击保存，密钥设置成功，并记住API密钥，备用。
04
打开Shopify后台，点击Online Store -> Preferences -> Goole Analytics，将以下代码黏贴到Custom Javascript处。
记住，需将代码中字体标红处，替换成上文中我们自己创建的API 密钥。
// Conversionpirate.com
if (window.location.href.indexOf(‘checkout’) > -1) {
window.onload = function() {
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = “https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places”;
script.async = “true”;
script.defer = “defer”;
document.body.appendChild(script);
setTimeout(initAutocomplete, 2000);
var lookup = {
“street_number”: document.getElementById(‘checkout_shipping_address_address1’),
“route”: document.getElementById(‘checkout_shipping_address_address1’),
“fullAddress”: document.getElementById(‘checkout_shipping_address_address1’),
“locality”: document.getElementById(‘checkout_shipping_address_city’),
“neighborhood”: document.getElementById(‘checkout_shipping_address_city’),
“administrative_area_level_1”: document.getElementById(‘checkout_shipping_address_province’),
“country”: document.getElementById(‘checkout_shipping_address_country’),
“postal_code”: document.getElementById(‘checkout_shipping_address_zip’)
};
var placeSearch;
var autocomplete;
var componentForm = {
street_number: ‘short_name’,
route: ‘long_name’,
locality: ‘long_name’,
administrative_area_level_1: ‘long_name’,
country: ‘long_name’,
neighborhood: ‘long_name’,
postal_code: ‘short_name’
};
function initAutocomplete() {
document.getElementById(‘checkout_shipping_address_address1’).onFocus = “geolocate()”;
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(‘checkout_shipping_address_address1’)), { types: [‘geocode’] });
autocomplete.addListener(‘place_changed’, fillInAddress);
}
function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in componentForm) {
lookup[component].value = ”;
}
var fullAddress = ”;
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
var val = place.address_components[i][componentForm[addressType]];
if (componentForm[addressType]) {
switch (addressType) {
case ‘street_number’:
fullAddress = val + fullAddress;
break;
case ‘route’:
fullAddress = fullAddress + ‘ ‘;
fullAddress = fullAddress + val;
break;
case ‘neighborhood’:
lookup.neighborhood.value = val;
break;
case ‘locality’:
lookup.locality.value = val;
break;
case ‘administrative_area_level_1’:
lookup.administrative_area_level_1.value = val;
break;
case ‘country’:
lookup.country.value = val;
break;
case ‘postal_code’:
lookup.postal_code.value = val;
break;
}
}
}
lookup.fullAddress.value = fullAddress;
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
};
}
至此，我们的这个小功能就完成了，赶紧去验收一下最终的成果吧！
以上内容，如果有任何疑问，请联系2790641050。
本篇文章来源于微信公众号: shopify技术服务