2016-01-21 85 views
0

因此,目前,我幾乎完成我的網站只是測試錯誤,我遇到了我的網站上的一個錯誤與谷歌的JavaScript自動完成地址表。谷歌地圖JavaScript API地方自動完成地址錶停止工作

下面的網址是我使用的例子還沒有被修改:

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

目前我的版本是工作在過去的20天沒有問題,但今天它突然決定:「你知道我不想工作「。它提供了以下消息: enter image description here

這個錯誤一直在發生,但它一直在過去20天工作,我沒有改變任何代碼或API密鑰,所以我不知道什麼是問題是。

任何幫助將不勝感激。

從字面上看它這是在上面提供的網址提供在谷歌開發者網站的標準版,代碼如下,:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Place Autocomplete Address Form</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
    </style> 
 
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
 
    <style> 
 
     #locationField, #controls { 
 
     position: relative; 
 
     width: 480px; 
 
     } 
 
     #autocomplete { 
 
     position: absolute; 
 
     top: 0px; 
 
     left: 0px; 
 
     width: 99%; 
 
     } 
 
     .label { 
 
     text-align: right; 
 
     font-weight: bold; 
 
     width: 100px; 
 
     color: #303030; 
 
     } 
 
     #address { 
 
     border: 1px solid #000090; 
 
     background-color: #f0f0ff; 
 
     width: 480px; 
 
     padding-right: 2px; 
 
     } 
 
     #address td { 
 
     font-size: 10pt; 
 
     } 
 
     .field { 
 
     width: 99%; 
 
     } 
 
     .slimField { 
 
     width: 80px; 
 
     } 
 
     .wideField { 
 
     width: 200px; 
 
     } 
 
     #locationField { 
 
     height: 20px; 
 
     margin-bottom: 2px; 
 
     } 
 
    </style> 
 
    </head> 
 

 
    <body> 
 
    <div id="locationField"> 
 
     <input id="autocomplete" placeholder="Enter your address" 
 
      onFocus="geolocate()" type="text"></input> 
 
    </div> 
 

 
    <table id="address"> 
 
     <tr> 
 
     <td class="label">Street address</td> 
 
     <td class="slimField"><input class="field" id="street_number" 
 
       disabled="true"></input></td> 
 
     <td class="wideField" colspan="2"><input class="field" id="route" 
 
       disabled="true"></input></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="label">City</td> 
 
     <td class="wideField" colspan="3"><input class="field" id="locality" 
 
       disabled="true"></input></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="label">State</td> 
 
     <td class="slimField"><input class="field" 
 
       id="administrative_area_level_1" disabled="true"></input></td> 
 
     <td class="label">Zip code</td> 
 
     <td class="wideField"><input class="field" id="postal_code" 
 
       disabled="true"></input></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="label">Country</td> 
 
     <td class="wideField" colspan="3"><input class="field" 
 
       id="country" disabled="true"></input></td> 
 
     </tr> 
 
    </table> 
 

 
    <script> 
 
// This example displays an address form, using the autocomplete feature 
 
// of the Google Places API to help users fill in the information. 
 

 
var placeSearch, autocomplete; 
 
var componentForm = { 
 
    street_number: 'short_name', 
 
    route: 'long_name', 
 
    locality: 'long_name', 
 
    administrative_area_level_1: 'short_name', 
 
    country: 'long_name', 
 
    postal_code: 'short_name' 
 
}; 
 

 
function initAutocomplete() { 
 
    // Create the autocomplete object, restricting the search to geographical 
 
    // location types. 
 
    autocomplete = new google.maps.places.Autocomplete(
 
     /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), 
 
     {types: ['geocode']}); 
 

 
    // When the user selects an address from the dropdown, populate the address 
 
    // fields in the form. 
 
    autocomplete.addListener('place_changed', fillInAddress); 
 
} 
 

 
// [START region_fillform] 
 
function fillInAddress() { 
 
    // Get the place details from the autocomplete object. 
 
    var place = autocomplete.getPlace(); 
 

 
    for (var component in componentForm) { 
 
    document.getElementById(component).value = ''; 
 
    document.getElementById(component).disabled = false; 
 
    } 
 

 
    // Get each component of the address from the place details 
 
    // and fill the corresponding field on the form. 
 
    for (var i = 0; i < place.address_components.length; i++) { 
 
    var addressType = place.address_components[i].types[0]; 
 
    if (componentForm[addressType]) { 
 
     var val = place.address_components[i][componentForm[addressType]]; 
 
     document.getElementById(addressType).value = val; 
 
    } 
 
    } 
 
} 
 
// [END region_fillform] 
 

 
// [START region_geolocation] 
 
// 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) { 
 
     var geolocation = { 
 
     lat: position.coords.latitude, 
 
     lng: position.coords.longitude 
 
     }; 
 
     var circle = new google.maps.Circle({ 
 
     center: geolocation, 
 
     radius: position.coords.accuracy 
 
     }); 
 
     autocomplete.setBounds(circle.getBounds()); 
 
    }); 
 
    } 
 
} 
 
// [END region_geolocation] 
 

 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdvFbc83j3kLRKr4ECIDrXRAt1WBHkSTU&signed_in=true&libraries=places&callback=initAutocomplete" 
 
     async defer></script> 
 
    </body> 
 
</html>

UPDATE 我我剛剛登錄Google Developers並重新生成了API密鑰,並將其全部複製到空白HTML中,而且我仍然遇到同樣的問題。

+0

您的密鑰有問題。您正在使用瀏覽器密鑰還是服務器密鑰? **你的**代碼是什麼樣的,請提供一個[最小,完整,已測試和可讀的示例](http://stackoverflow.com/help/mcve)來說明問題。 – geocodezip

+0

好的我已經編輯了這篇文章,現在它包含了我的API密鑰的代碼,我的一個包含除了CSS以外的任何修改 – Skinnymig

回答

0

好吧,我重新生成密鑰,並插入它沒有工作,但隨機20分鐘後,它的工作。

無論如何感謝您的幫助:)

相關問題