You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Google地图与地址自动补全功能间歇性失效问题排查求助

Google地图与地址自动补全功能间歇性失效问题排查求助

我有一个用户提交帖子的表单页面。

表单的位置区域

<div class="section">
 <h2 class="section-title">
     Location
     
     <span class="tooltip">Your location will be displayed on your ad and determines what city it will be posted in.</span>
 </h2>

 <div class="map-container">
  <div id="map"></div>
</div>
<div class="location-section location-limited-width">
    <textarea class="form-control" 
        id="location" 
        name="listingaddress" 
        rows="1"
        placeholder="Type Address or Postal Code" 
        required 
        autocomplete="off" 
        style="width: 100%; max-width: 500px; margin-right: 10px; resize: none;"></textarea>
    <span class="info-text" style="font-size: 14px; font-weight: bold; color: #333;">
      <i class="fa fa-info-circle"></i> Type address or postal code and select from the options that appear.
    </span>

    <span id="error-message" style="color: red; display: none;">
        * Your selected address must include a minimum of City or Town.<br>
        * You must select from the options that appear in the dropdown box.
    </span>
    <input type="hidden" id="locality" name="locality" />
    <input type="hidden" id="administrative_area_level_1" name="administrative_area_level_1" />
</div>

<!-- Display locality if selected -->
<div id="locality-display" class="locality-display" style="display:none;">
    Your item will be listed in <strong><span id="locality-name"></span></strong> 
    <span class="info-icon"></span>
    <span class="tooltip">Your location will be displayed on your ad and determines what city it will be posted in.</span>
</div>

脚本部分

<script>
document.addEventListener('DOMContentLoaded', function() {
    let map;
    let marker;
    const input = document.getElementById('location');
    const localityInput = document.getElementById('locality'); 
    const provinceInput = document.getElementById('administrative_area_level_1'); 
    const errorMessage = document.getElementById('error-message');
    const localityDisplay = document.getElementById('locality-display');
    const localityName = document.getElementById('locality-name'); // Display element for locality
    let autocomplete; 
    let lastInputValue = ''; 

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 47.5615, lng: -52.7126 },  // Default to St. John's, Newfoundland
            zoom: 12  // Adjusted zoom level for a closer view
        });

        marker = new google.maps.Marker({
            position: { lat: 47.5615, lng: -52.7126 },  // Default marker position
            map: map
        });
    }

    function extractLocalityAndProvince(result) {
        const addressComponents = result.address_components;
        const locality = addressComponents.find(component => component.types.includes("locality"));
        const province = addressComponents.find(component => component.types.includes("administrative_area_level_1"));

        if (locality && locality.long_name) {
            localityInput.value = locality.long_name;
            localityName.textContent = locality.long_name;  // Display locality in the locality-name span
            localityDisplay.style.display = 'block';  // Show the locality-display div
            errorMessage.style.display = 'none';  // Hide the error message
        } else {
            clearLocationInput();
            showErrorMessage();
        }

        if (province) {
            provinceInput.value = province.long_name;
        }
    }

    function clearLocationInput() {
        input.value = '';  // Clear the input box
        localityInput.value = '';  // Clear the hidden locality field
        localityDisplay.style.display = 'none';  // Hide the locality display
    }

    function showErrorMessage() {
        errorMessage.style.display = 'block';  // Show the error message
    }

    function initAutocomplete() {
        autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.setFields(['address_components', 'geometry', 'formatted_address']);
        autocomplete.setComponentRestrictions({
            country: ['ca']  // Restrict to Canada
        });

        autocomplete.addListener('place_changed', function() {
            const place = autocomplete.getPlace();

            // Check if a place was actually selected from the dropdown
            if (!place || !place.geometry) {
                console.log("No details available for input: '" + input.value + "'");
                clearLocationInput();  // Clear any previously set values
                showErrorMessage();
                return;
            }

            // Update the map view and marker position
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);
            }
            marker.setPosition(place.geometry.location);

            // Update the input box and hidden fields for locality and province
            input.value = place.formatted_address || '';
            extractLocalityAndProvince(place);
        });

        // Ensure fields update on Enter keypress when using keyboard to select
        input.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();  // Prevent form submission on Enter
                google.maps.event.trigger(autocomplete, 'place_changed');
            }
        });
    }

    initMap();
    initAutocomplete();

    input.addEventListener('focus', function() {
        this.value = '';  // Clear the input field when focused
    });

    document.querySelector('form').addEventListener('submit', function(event) {
        if (!input.value || input.value.toLowerCase() === 'null') {
            event.preventDefault();
            alert('Please select a valid location.');
        }
    });
});
</script>

这个表单和脚本对大多数用户有效,他们可以正常选择地址并提交表单。但有部分用户反馈遇到了「Oops, something went wrong」的Google地图及自动补全功能错误,错误截图如下:

Google error message

我已经添加了JavaScript错误捕获逻辑,会将错误信息记录到服务器,以便后续排查。不过目前想先请教大家,这种间歇性失效可能是什么原因导致的?

感谢阅读我的问题。

备注:内容来源于stack exchange,提问作者Roge

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.15 10:35:28