自动填充 Google Place 无法在移动设备上运行

Question

我有一个网站进入我实现了谷歌自动完成的地方。 当用户写一个地点时，地点的不同建议出现在一个列表中，但是当他点击其中一个时，点击事件不起作用并且列表关闭。 在桌面模式下它工作正常。
在我的网站中，我不使用 Fastclick。我已经在网上看到了很多回复，但对我没有帮助。

Answer 1

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

Answer 2

对于遇到此问题的任何人，我通过添加此 javascript 代码修复了我的问题。

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

在这个帖子上找到了解决方案，所以如果您想了解更多信息，请查看这里this