使用 jQuery 查询 Google Places API答案

【问题标题】：Querying Google Places API using jQuery使用 jQuery 查询 Google Places API
【发布时间】：2011-08-31 12:57:10
【问题描述】：

Google Places API 现已全面推出。我正在尝试使用 jQuery 中的 .ajax() 调用来调用 Google Places。我不断返回的错误是 Uncaught SyntaxError: Unexpected token :

我正在使用 jQuery 1.5.2。我也尝试过 1.5.1，但结果相同。如果可以的话，我宁愿不迁移到 1.6.1。

从那时起，我就对其他 API 进行了这样的 ajax 调用，但在使用 Google Places 时遇到了问题。以下是您可以使用的非常基本的代码示例。您需要在 Google 提供的 API 控制台 (https://code.google.com/apis/console) 中获取自己的密钥

jQuery.noConflict();
 jQuery(document).ready(function(){

  var url = 'https://maps.googleapis.com/maps/api/place/search/json';

  jQuery.ajax({
   url: url,
   dataType: 'jsonp',
   type: 'GET',
   data:  {
     location: '33.787794,-117.853111',
     radius: 1000,
     name: 'coffee',
     key: 'your_key', // add your key here
     sensor: 'false'
     },

   // on success
   success: function(data, textStatus, jqXHR){

      console.log(data);


   },

   // on failure
   error: function (jqXHR, textStatus, errorThrown){
    console.log(jqXHR);
    console.log(textStatus);
    console.log(errorThrown);
   }
   });
 });

【问题讨论】：

标签： jquery google-places-api

【解决方案1】：

从文档中我可以看到，Google Places Web Service API 确实不支持 JSONP - 仅支持 JSON。您看到的错误是因为响应只是 JSON，但被解析为 JSONP，这会导致错误。

查看 Google Maps JavaScript API - 它包含一个您可以使用的地方库 - 请参阅 google.maps.places.PlacesServices#search()。

AFAIK，似乎正在转向删除 JSONP 支持 - 例如，在 v2 中用于支持 JSONP（未记录）但在 v3 中不再支持的地理编码 API。有人建议可能是为了鼓励开发人员使用 JavaScript API。

【讨论】：

Google Maps API 服务条款要求 API（包括地理编码和 Places 等各种网络服务）“与 Google 地图结合使用”。这意味着当在网页中使用服务时（JSONP 的用处），您无论如何都需要加载 API 以显示地图，因此没有理由不使用相关的 API 类来访问这些服务.在许多情况下，这更容易，因为您不必构建或 URL 编码 URL，结果会为您转换为相关的 Maps API 对象（例如 google.maps.LatLng）。
@Thor，我不认为这是真的，因为他们是公开发布的。文档现在声明...“如果您的应用程序在不显示 Google 地图的页面或视图上显示 Places API 数据，则您必须显示带有该数据的“Powered by Google”徽标。”
鉴于我上面所说的不需要地图，考虑到跨域问题，如何从 JavaScript 调用 Web 服务？只有服务器端调用？
@hemmeter 是的，不幸的是（AFAIK）跨域请求的唯一选项是 JSONP，使用代理或访问服务器代码以使用 HTTP 允许标头。在这种情况下，只保留代理选项。
Google Places API 条款规定“您不得在没有相应的 Google 地图的情况下使用或显示内容，除非 Maps API 文档明确允许您这样做，或获得来自谷歌。鉴于网络服务旨在为移动应用程序提供服务，这些应用程序的屏幕空间受到限制，“相应的谷歌地图”不需要总是与 Places API 结果一起显示。例如，它可以在一个不同的选项卡，只要“Powered by Google”徽标显示在 Places API 结果显示的位置，但没有地图。

【解决方案2】：

以下不是直接的解决方案。但是，这就是我让它工作的方式......

由于不支持 JSONP（而且我不明白客户端代码应该如何使用该 API），解决方案是通过您的服务器代理它...如果您在服务器端使用 rails ，以下可能对您有用：

class PlacesController < ApplicationController
    def autocomplete
        # Using Google Web Services
        # https://code.google.com/apis/console
        url = "https://maps.googleapis.com/maps/api/place/autocomplete/json"
        _params = {
            :key => "<<< YOUR KEY >>>",
            :types => "geocode",
            :sensor => (params[:sensor] or false),
            :input => params[:q]
        }
        ans = %x{curl -G --data-urlencode #{_params.map{|k,v| "#{k}=\"#{v}\""}.join(" --data-urlencode ")} "#{url}"}
        ans = ActiveSupport::JSON.decode(ans)
        render :json => ans
    end
end

PS：要生成 API 密钥，请使用https://code.google.com/apis/console

【讨论】：