Google Maps/Places 'autocomplete' API 可以通过 AJAX 使用吗?

2022-01-15 00:00:00 json google-api xmlhttprequest jquery javascript

我正在尝试使用 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 页面上.

相关文章