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地图及自动补全功能错误,错误截图如下:

我已经添加了JavaScript错误捕获逻辑,会将错误信息记录到服务器,以便后续排查。不过目前想先请教大家,这种间歇性失效可能是什么原因导致的?
感谢阅读我的问题。
备注:内容来源于stack exchange,提问作者Roge
相关产品推荐
相关产品推荐

