問題描述

我正在嘗試使用 Google Places 自動完成 API 在 Web 應用程序上使用企業數據預先填寫表單，以簡化數據輸入.API 非常簡單，但它似乎不想接受 XHR.

I'm trying to use the Google Places autocomplete API to pre-fill a form on a web application with Establishment data to ease data-entry. The API is pretty straightforward, but it doesn't seem to want to accept the XHR.

$.getJSON("https://maps.googleapis.com/maps/api/place/autocomplete/json",{
  input: input.term,
  sensor: false,
  types: 'establishment',
  location: '40.01496,-105.27029',
  radius: 10000,
  key: Config.googleplaceskey
},function(places_response){
    //Some other code.
});

我在控制臺中得到了這個:

I get this in the console:

XMLHttpRequest 無法加載 https://maps.googleapis.com/maps/api/place/autocomplete/json?input=At&sensor=false&types=establishment&location=40.01496%2C-105.27029&半徑=10000&key=AIzaSyDKzUgcLklQE_U5494vHq_SzrFakNHugaQ.Access-Control-Allow-Origin 不允許來源 http://localhost:8086.

這難道不是 API 的用途嗎?任何人都知道一種解決方法，或者我可以發送一些額外的參數來使它工作嗎?

Is this somehow not what the API is meant for? Anyone know a workaround, or some kind of extra parameter(s) I could send to make it work?

更新:

這是此調用的 API 文檔的鏈接.父文檔實際上甚至有 JavaScript JSON 解析示例.真的很困惑為什么會在服務器端關閉它.

Here's the link to the API documentation for this call. The parent docs actually even have JavaScript JSON-parsing examples. Really confusing why this would be shut down on the server side.

http://code.google.com/apis/maps/文檔/places/autocomplete.html

推薦答案

下面是一個代碼片段，供以后遇到這種情況的讀者參考.

Here is a code snippet for future readers who come across this scenario.

使用Places API"而不是Maps API"，此代碼段使用 Google 返回的數據填充我的表單元素(包括用于自動完成的輸入).

Using the "Places API" rather than the "Maps API", this code snippet fills in my form elements (including the input that is used to autocomplete) with returned data from Google.

/* Use google place API to auto complete the address field and populate form inputs */
function addressAutoComplete(){
    var planAddress = document.getElementById('mps_planaddress'),
        planCity = document.getElementById('mps_plancity'),
        planCounty = document.getElementById('mps_plancounty'),
        planZip = document.getElementById('mps_planzip'),
        planSub = document.getElementById('mps_plansubdivision'),
        options = {
            componentRestrictions: {country: 'us'}
    };
    autocomplete = new google.maps.places.Autocomplete(planAddress, options);
    // After the user selects the address
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        planSub.focus();
        var place = autocomplete.getPlace();
        planAddress.value = place.name;
        planCity.value = place.address_components[2].long_name;
        planCounty.value = place.address_components[3].long_name;
        planZip.value = place.address_components[6].long_name;
    });
}

在place_changed"的自動完成上放置一個監聽器(他們從列表中選擇了一些東西)，然后用返回的數據填充輸入.

Put a listener on the autocomplete for "place_changed" (they chose something from the list) and then fill in the inputs with the data returned.

所有這些都列在 Place Library Google 頁面上.

這篇關于Google Maps/Places 'autocomplete' API 可以通過 AJAX 使用嗎?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！