Google 地图/地点可以“自动完成”吗？ API可以通过AJAX使用吗？

Question

我正在尝试使用 Google Places 自动完成 API 在网络应用程序上使用机构数据预填写表单，以简化数据输入。 API 非常简单，但它似乎不想接受 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.
});

我在控制台中收到此消息：

XMLHttpRequest 无法加载https://maps.googleapis.com/maps/api/place/autocomplete/json?input=At&sensor=false&types=builtment&location=40.01496%2C-105.27029&radius=10000&key=AIzaSyDKzUgcLklQE_U5494vHq_SzrFakNHugaQ。 Access-Control-Allow-Origin 不允许 Origin http://localhost:8086。

这是否不是 API 的用途？有人知道解决方法，或者我可以发送某种额外的参数来使其工作吗？

更新：

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

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

Answer 1

这是一个代码片段，供未来遇到这种情况的读者参考。

使用“Places API”而不是“Maps API”，此代码片段使用 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”的自动完成上放置一个监听器（他们从列表中选择了一些内容），然后用返回的数据填充输入。

所有这些都列在Google 地点库页面上。

Answer 2

要进行这样的跨域 AJAX 调用，您应该使用带有回调的 JSONP。不过，Google 不提供用于自动完成的 JSONP 接口。

您也许可以改用此自动完成类，尽管似乎无法设置下拉菜单的样式。

编辑可能有办法做到这一点。查看 geo-autocomplete jQuery 插件。它有两个演示。然而，我还没有对此进行适当的审视。

Answer 3

有两种方法可以访问 Google 地图自动完成 API。

第一个是通过 google.maps.places.Autocomplete 类。这提供了 Javascript 中所有必要的实现。但是，您可以完全控制样式。使用 pac-container 和 pac-item CSS 类。

第二种是通过自动完成网络服务。由于同源策略（没有 JSONP API），无法通过浏览器访问此内容。这是访问自动完成结果的最灵活的方式。

Answer 4

Google 可能只允许通过其自己的 Javascript API 调用此 API，您可以从maps.google.com 提供的 Javascript 文件加载该 API。缺少 Access-Control-Allow-Origin 标头表明您不应该通过 Javascript 使用 API。

或者，您可以简单地编写一个服务器端代理函数，该函数调用 Google API 并将结果转发到您自己的 $.getJSON 调用，但这可能违反服务条款。

http://www.daniweb.com/web-development/php/code/216729

（免责声明：我还没有阅读此特定函数调用的 API 规范）

Answer 5

您可以拦截返回的 JSONP 结果通过 google.maps.places.Autocomplete 功能并根据需要使用它们。

基本上，您在 head 元素上重新定义了appendChild 方法，然后监视Google 自动完成代码插入到JSONP DOM 中的javascript 元素。添加 javascript 元素时，您可以覆盖 Google 定义的 JSONP 回调，以便访问原始自动完成数据。

这有点像黑客，如下（我正在使用 jQuery，但这个黑客没有必要工作）：

//The head element, where the Google Autocomplete code will insert a tag 
//for a javascript file.
var head = $('head')[0];  
//The name of the method the Autocomplete code uses to insert the tag.
var method = 'appendChild';  
//The method we will be overriding.
var originalMethod = head[method];

head[method] = function () {
  if (arguments[0] && arguments[0].src && arguments[0].src.match(/GetPredictions/)) {  //Check that the element is a javascript tag being inserted by Google.
    var callbackMatchObject = (/callback=([^&]+)&|$/).exec(arguments[0].src);  //Regex to extract the name of the callback method that the JSONP will call.
    var searchTermMatchObject = (/\?1s([^&]+)&/).exec(arguments[0].src);  //Regex to extract the search term that was entered by the user.
    var searchTerm = unescape(searchTermMatchObject[1]);
    if (callbackMatchObject && searchTermMatchObject) {
      var names = callbackMatchObject[1].split('.');  //The JSONP callback method is in the form "abc.def" and each time has a different random name.
      var originalCallback = names[0] && names[1] && window[names[0]] && window[names[0]][names[1]];  //Store the original callback method.
      if (originalCallback) {
        var newCallback = function () {  //Define your own JSONP callback
          if (arguments[0] && arguments[0][3]) {
            var data = arguments[0][4];  //Your autocomplete results
            //SUCCESS! - Limit results here and do something with them, such as displaying them in an autocomplete dropdown.
          }
        }

        //Add copy all the attributes of the old callback function to the new callback function. This prevents the autocomplete functionality from throwing an error.
        for (name in originalCallback) {  
          newCallback[name] = originalCallback[name];
        }
        window[names[0]][names[1]] = newCallback;  //Override the JSONP callback
      }
    }

  //Insert the element into the dom, regardless of whether it was being inserted by Google.
  return originalMethod.apply(this, arguments);
};

Answer 6

这是一个跨域请求。默认情况下，浏览器会阻止来自跨域站点的响应。您需要使用 jsonp 作为数据类型。只要用 google 搜索一下，你就可以看到如何使用 jquery API 来完成它。堆栈溢出也有围绕这些的问题。

在同源策略下，server1.example.com 提供的网页无法正常连接或与除 server1.example.com 以外的服务器通信。 HTML 元素是一个例外。利用元素的开放策略，某些页面使用它们来检索对来自其他来源的动态生成的 JSON 格式数据进行操作的 Javascript 代码。这种使用模式称为 JSONP。

请注意，Google Places 不兼容 JSONP，因此我使用了 Google Places JavaScript API。

Answer 7

使用 Google Maps Javascript API 中的地点库：
Javascript 地点自动完成

Places API 与 Maps API 不同。

Answer 8

您可以使用 PHP 绕过此问题。

在 PHP 脚本中，使用 file_get_contents 来查询 URL，如下所示：

$suggestions = json_decode(file_get_contents('https://maps.googleapis.com/maps/api/place/autocomplete/json?input=blabla&sensor=false&types) = Installation&radius=10000')

然后您可以对 PHP 脚本使用 AJAX 请求，该请求将有效绕过跨域返回结果约束。