自动完成Google地方信息无法在移动设备上使用

如何解决自动完成Google地方信息无法在移动设备上使用

我有一个网站实现了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>