自動填充 Google Place 無法在移動設備上運行

Question

我有一個網站，我實現了谷歌自動完成的地方。 當用戶寫一個地點時，地點的不同提議出現在列表中，但是當他點擊其中一個時，點擊事件不起作用並且列表關閉。 在桌面模式下它工作正常。
在我的網站中，我不使用 Fastclick。 我已經在 web 上看到了很多回應，但這對我沒有幫助。

Answer 1

對於遇到此問題的任何人，我通過添加此 javascript 代碼來修復我的問題。

$(document).on(
    {
        DOMNodeInserted: function () {
            $(".pac-item, .pac-item span", this).addClass("needsclick");
        },
    },
    ".pac-container"
);

在這個線程上找到了解決方案，所以如果您想了解更多信息，請查看這里

Answer 2

 '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, 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>