javascript - Google Places API 自动完成 - 以浏览器语言保留占位符,即使结果以另一种语言列出
问题描述
我正在以多语言形式使用 Google Places API 自动完成功能。我想用英语填充我的字段,以便地址信息以英语进入我的数据库。最简单的方法似乎是将“语言”参数添加到 API 并将语言设置为英语。问题是,如果我这样做,那么即使在我的法语或西班牙语表单上,Google 在我的输入字段中放置的内置占位符也是英语的。
我也不能将语言设置为英语并用另一种语言填写字段,但是我需要以某种方式访问英语地址组件才能将它们放入数据库。
简而言之:
我需要内置的 Google 地址占位符使用用户的语言
我需要英语地址值才能放入我的数据库。我该怎么做呢?
编码:
var placeSearch, autocomplete;
var componentFormOrig = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
var componentToIdOrig = {
street_number: 'id_original_address',
route: 'id_original_address',
locality: 'id_original_city',
administrative_area_level_1: 'id_original_state',
country: 'id_original_country',
postal_code: 'id_zip_code'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// geographical location types.
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('id_original_address'));
// Avoid paying for data that you don't need by restricting the set of
// place fields that are returned to just the address components.
autocomplete.setFields(['address_component']);
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener('place_changed', fillInAddress.bind(null, autocomplete, componentFormOrig, componentToIdOrig));
}
function fillInAddress(autocompleteObj, componentForm, componentToId) {
console.log(autocompleteObj);
// Get the place details from the autocomplete object.
var place = autocompleteObj.getPlace();
for (var item in componentToId) {
console.log(item);
document.getElementById(componentToId[item]).value = '';
document.getElementById(componentToId[item]).disabled = false;
}
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
var fullAddress = [];
console.log("address_components");
for (var i = 0; i < place.address_components.length; i++) {
console.log(place.address_components[i]);
var addressType = place.address_components[i].types[0];
console.log("addressType=" + addressType);
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
console.log("val=" + val);
document.getElementById(componentToId[addressType]).value = val;
}
if (addressType == "street_number") {
fullAddress[0] = val;
} else if (addressType == "route") {
fullAddress[1] = val;
}
}
document.getElementById(componentToId['street_number']).value = fullAddress.join(" ");
if (document.getElementById(componentToId['street_number']).value !== "") {
document.getElementById(componentToIdOrig['street_number']).disabled = false;
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
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());
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=---&libraries=places&callback=initAutocomplete"
async defer></script>
解决方案
推荐阅读
- wordpress - 在 WordPress 仪表板中制作自定义列以进行自定义分类 SORTABLE
- r - 在 RStudio 中,这行代码出现两个错误。有人可以帮我找出问题所在吗?我给了代码表格开始
- jquery - SweetAlert2 行为与 Jquery 的 keydown
- android - Flutter 语音识别应用——_platformCallHandler 调用 Speech.onError 2
- pycharm - 为什么 python 中的这个 Mayavi 动画在 Pycharm Run、Console 和 PyCharm Debug 中的执行方式不同?
- android - Android -> 在 Android 10 及更低版本上获取当前网络类型
- php - PHPMailer 250 验证
- reactjs - ReactJS图标在按钮上没有改变
- android - 在 Android 上禁用 USB 驱动程序
- multithreading - OpenMP 任务输出