问题描述
我有一个网站实现了Google自动完成功能。
当用户编写位置时，列表中会出现位置的不同主张，但是当他单击其中的一个时，单击事件将不起作用，列表将关闭。
在桌面模式下，它可以正常工作。
在我的网站上，我不使用Fastclick。我已经在网络上看到很多回复，但并没有帮助我。
解决方法
'use strict';
// This sample uses the Autocomplete widget to help the user select a
// place,then it retrieves the address components associated with that
// place,and then it populates the form fields with those details.
// This sample requires the Places library. Include the libraries=places
// parameter when you first load the API.
let placeSearch,autocomplete;
let componentForm = {
// street_number: 'short_name',street: 'long_name',city: 'long_name',state: 'short_name',country: 'long_name',// postal-code: 'short_name',};
function initAutocomplete() {
// Create the autocomplete object,restricting the search predictions to
// geographical location types.
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('address-autocomlete'),{ types: ['geocode'] }
);
// console.log(autocomplete);
// 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',function () {
console.log('place_changed');
var place = autocomplete.getPlace();
if (place && !place.name) {
for (let component in componentForm) {
if (document.getElementById(component)) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
}
var flag_city = false;
for (let i = 0; i < place.address_components.length; i++) {
let addressType = place.address_components[i].types[0];
let val = place.address_components[i].long_name;
if (addressType == 'street_number') {
var numberStreet = val + ' ';
} else if (addressType == 'locality' && document.getElementById('city')) {
document.getElementById('city').value = val;
flag_city = true;
} else if (addressType == 'country' && document.getElementById(addressType)) {
document.getElementById(addressType).value = val;
} else if (addressType == 'administrative_area_level_1' && document.getElementById('state')) {
document.getElementById('state').value = val;
} else if (addressType == 'route' && document.getElementById('street')) {
document.getElementById('street').value =
numberStreet + val;
} else if (addressType == 'postal_code' && document.getElementById('postal-code')) {
document.getElementById('postal-code').value = val;
document.getElementById('address-autocomlete').value += ' ' + val;
}
if (
!flag_city &&
addressType == 'administrative_area_level_1'
) {
if (document.getElementById('city')) {
document.getElementById('city').value = val;
}
}
}
}
});
}
function fillInAddress() {
// Get the place details from the autocomplete object.
//console.log(place);
/* for (let component in componentForm) {
if (document.getElementById(component)) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
} else {
console.log('component: ',component);
}
} */
// Get each component of the address from the place details,// and then fill-in the corresponding field on the form.
/* for (let i = 0; i < place.address_components.length; i++) {
let addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
let val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}*/
}
// 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) {
let geolocation = {
lat: position.coords.latitude,lng: position.coords.longitude,};
let circle = new google.maps.Circle({
center: geolocation,radius: position.coords.accuracy,});
autocomplete.setBounds(circle.getBounds());
});
}
}
function ready(callbackFunc) {
if (document.readyState !== 'loading') {
// Document is already ready,call the callback directly
callbackFunc();
} else if (document.addEventListener) {
// All modern browsers to register DOMContentLoaded
document.addEventListener('DOMContentLoaded',callbackFunc);
} else {
// Old IE browsers
document.attachEvent('onreadystatechange',function () {
if (document.readyState === 'complete') {
callbackFunc();
}
});
}
}
ready(function () {
var autocomplete2 = document.getElementById('address-autocomlete');
if (autocomplete2) {
autocomplete2.addEventListener('focusout',function () {
setTimeout(checkAddress,500);
});
autocomplete2.addEventListener('focusin',function () {
emptyAddressFields();
});
}
/* var test = document.getElementsByClassName('pac-item');
var myFunction = function() {
alert('hello');
};
for (var i = 0; i < test.length; i++) {
test[i].addEventListener('mouseenter',myFunction,false);
} */
});
function checkAddress() {
var errorAddressComplete = document.getElementById('errorAddressComplete');
var autocomplete2 = document.getElementById('address-autocomlete');
var country = document.getElementById('country');
var street = document.getElementById('street');
var state = document.getElementById('state');
var city = document.getElementById('city');
var postalCode = document.getElementById('postal-code');
if (
(country && !country.value && country.getAttribute('required')) ||
(state && !state.value && state.getAttribute('required')) ||
(street && !street.value && street.getAttribute('required')) ||
(city && !city.value && city.getAttribute('required')) ||
(postalCode && !postalCode.value && postalCode.getAttribute('required'))
) {
errorAddressComplete.classList.remove('hide');
errorAddressComplete.classList.add('display');
emptyAddressFields();
} else {
errorAddressComplete.classList.remove('display');
errorAddressComplete.classList.add('hide');
}
}
function emptyAddressFields() {
var autocomplete2 = document.getElementById('address-autocomlete');
var country = document.getElementById('country');
var state = document.getElementById('state');
var street = document.getElementById('street');
var city = document.getElementById('city');
var postalCode = document.getElementById('postal-code');
if (country && country.value) {
country.value = '';
}
if (state && state.value) {
state.value = '';
}
if (street && street.value) {
street.value = '';
}
if (city && city.value) {
city.value = '';
}
if (postalCode && postalCode.value) {
postalCode.value = '';
}
if (autocomplete2 && autocomplete2.value) {
autocomplete2.value = '';
}
}<?php
use Podium\Environment\Environment as Environment;
$env = new Environment();
if ($env->isLive()) {
$cssSuffix = '.min';
$jsSuffix = '.min';
} else {
$cssSuffix = '';
$jsSuffix = '';
}
wp_enqueue_script(
'googleMapsApi-script','https://maps.googleapis.com/maps/api/js?key=' .
my google place api key .
'&libraries=places&callback=initAutocomplete',null,true
);
wp_enqueue_script(
'address-autocomlete',get_template_directory_uri() .
'/dist/scripts/address-autocomplete' .
$jsSuffix .
'.js',['googleMapsApi-script'],md5(getFileVersion('js')),true
);
?>
<label class="required animated-label">
<span class="label-text"><?php _e('Full Shipping Address','podium'); ?></span>
<input
id="address-autocomlete"
aria-label="Search Address."
required="required"
autocorrect="off"
autocomplete="on"
name="address-autocomlete"
role="combobox"
aria-autocomplete="both"
aria-expanded="false"
type="text"
placeholder="<?php _e('Full Address','podium'); ?>"
/>
<span class="form-error" id="errorAddressComplete">
<?php _e('Please select a valid address from the list','podium');
?>
</span>
</label>