Google Maps / Places的自动填充API可以通过AJAX使用吗？ [英] Can Google Maps/Places 'autocomplete' API be used via AJAX?

问题描述

我正在尝试使用Google商家信息自动填充API来预先填写具有创建数据的网络应用程序上的表单，以简化数据输入。 API非常简单，但它似乎并不想接受XHR。

$ b

  $ .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）{
 //其他一些代码
}）; 
  

我在控制台中得到这个：

XMLHttpRequest无法加载https://maps.googleapis.com/maps/api/place/autocomplete/json?input=At&sensor=false&types=establishment&location=40.01496%2C-105.27029& ;半径= 10000&安培;键= AIzaSyDKzUgcLklQE_U5494vHq_SzrFakNHugaQ。起源http：// localhost：8086不被Access-Control-Allow-Origin允许。

这是不是API的原因意味着什么？任何人都知道解决方法，或者我可以发送一些额外的参数来使它工作？

更新：

以下是此次调用API文档的链接。父文档实际上甚至包含JavaScript JSON解析示例。真是令人困惑，为什么会在服务器端关闭它。

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

解决方案

以下是面向未来读者的代码片段。

使用Places API而不是 Google Maps API中，这段代码片段填充了我的表单元素（包括用于自动完成的输入），并返回了Google返回的数据。

  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）; 
 //用户选择地址
后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; 
}）; 
 
 
 
 $ b 
将一个监听器放在place_changed的自动完成上（他们从列表），然后用返回的数据填入输入。 
 
 
 
所有这些都列在放置图书馆Google页面。  
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 cannot load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=At&sensor=false&types=establishment&location=40.01496%2C-105.27029&radius=10000&key=AIzaSyDKzUgcLklQE_U5494vHq_SzrFakNHugaQ. Origin http://localhost:8086 is not allowed by Access-Control-Allow-Origin.

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?

Update:

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/documentation/places/autocomplete.html
解决方案
Here is a code snippet for future readers who come across this scenario.

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;
    });
}
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. 

All of this is listed on the Place Library Google page. 

                        
这篇关于Google Maps / Places的自动填充API可以通过AJAX使用吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！