如何查询Google Places API?

时间:2018-01-29 18:01:35

标签: javascript jquery google-maps google-maps-api-3 google-places-api

我试图在HTML Places页面(在我的Spring项目中)向Google Places API发出客户端jquery请求,以便我可以确定半径为x,y的特定业务类型的评级。目前我试图这样做:

  function getCafe(){

       $(document).ready(function(){
           $('.search_latitude').val(marker.getPosition().lat());
           $('.search_longitude').val(marker.getPosition().lng());

           // These are lat long values calculated by the user's searched location on a google map on the client side
           var Lat = marker.getPosition().lat();
           console.log(Lat);
           var Long = marker.getPosition().lng();
           console.log(Long);
           var cafeRatings = [];
           // Ive disclosed my API Key
           var url = "https://maps.googleapis.com/maps/api/place/nearbysearch/xml?location=" + Lat + "," + Long + "&radius=500&type=restaurant&keyword=cruise&key=MY_API_KEY";

           $.ajax({
            type: "GET",
            dataType: "xml",
            url: url,
            success: function(xml) {
                $(xml).find('results').each(function(){
                    $(this).find("rating").each(function(){
                        var rating = $(this).text();
                        cafeRatings.push(rating);
                    });
                });
               //This is a simple debug to display the contents of the rating array to ensure the parse worked correctly
                alert(cafeRatings.join("\n"));
            }
           });
          });

    } 

然而Michael Geary对这个问题Google's Places API and JQuery request - Origin http://localhost is not allowed by Access-Control-Allow-Origin的回答让我相信我不能使用Ajax jquery以这种方式访问​​API而且我必须使用来自的地方库。 Maps API V3。 (正如我所说)不能直接从JavaScript或jQuery代码中获取URL。"

据说,我发现这样做的文档非常广泛,在线资源似乎非常有限。有没有人有任何关于如何简单地将API中的评级元素存储到JS中的数组中的经验,以便我可以计算平均值并将其显示在文本框中?

如果需要这样,XML格式的API看起来如何

<PlaceSearchResponse>
<status>OK</status>


 <result>
         <name>Sydney Showboats</name>
         <vicinity>32 The Promenade, Sydney</vicinity>
         <type>travel_agency</type>
         <type>restaurant</type>
         <type>food</type>
         <type>point_of_interest</type>
         <type>establishment</type>
    <geometry>
        <location>
        <lat>-33.8675570</lat>
        <lng>151.2015270</lng>
        </location>
          <viewport>
           <southwest>
             <lat>-33.8689120</lat>
             <lng>151.2001126</lng>
           </southwest>
           <northeast>
             <lat>-33.8662141</lat>
             <lng>151.2028105</lng>
           </northeast>
          </viewport>
    </geometry>
    <rating>3.8</rating> <------ This is the element im trying to ad to the array
    <icon>
    https://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png
    </icon>
    <reference>
    CmRSAAAALItuCtuLapozzsjq3dmKqj7NDik149XsgUwHD3ob5AWfHYlZtykuJbQa0cq0GMqX8dRgucTCmitnXgV-ekE3GfV7910rzHhx3ZuadVYNuWMzLDVZDCj2G1yiBw8r_hhgEhCPDXsniaZ2ZrkvYyXFfmQrGhSzdmkAEz4stXNx2qFe-GqAlldzgw
    </reference>
    <id>ce4ffe228ab7ad49bb050defe68b3d28cc879c4a</id>
    <opening_hours>
    <open_now>false</open_now>
    </opening_hours>
    <photo>
    <photo_reference>
    CmRaAAAAh4dP9hsZ_6515QNxouVnuYFYKemmf8BE01rcaOvkFlILQiwGNe_OAX0ikmobMmWZJvyjsFEsn7j1TFhauHSrek8nY5GsW24_6nwJsqEwHTUC10SL5gQITHhkdam50G1PEhCP-C7Of2mkjqJCTYFeYGWuGhQjVoWASHiGSp3WHm26Bh2sYOglZw
    </photo_reference>
    <width>2048</width>
    <height>1152</height>
    <html_attribution>
    <a href="https://maps.google.com/maps/contrib/107415973755376511005/photos">Sydney Showboats</a>
    </html_attribution>
    </photo>
    <place_id>ChIJjRuIiTiuEmsRCHhYnrWiSok</place_id>
    <scope>GOOGLE</scope>
    </result>
........
</PlaceSearchResponse>

1 个答案:

答案 0 :(得分:1)

我以前的建议保持不变:您不能使用Places API的面向服务器的Web服务版本。您必须使用JavaScript客户端库。它比Web服务API更容易使用(即使您被允许使用它),因为您不必解析任何XML,只需访问客户端库提供的对象属性。

Places Library documentation中有几个例子。 Place Search示例与您正在进行的操作非常接近。看起来您想访问某个地方的rating,这对JavaScript库来说很容易;只需使用rating对象的place属性(或者您给该变量的任何名称)。

我使用了地方搜索示例和updated the fiddle to illustrate accessing the rating property。试一试,看看它是否有助于回答你的问题。

在任何情况下,底线都没有改变:您不能使用Web服务API,您需要使用JavaScript客户端库,但这是一件好事,因为客户端库为您完成大部分工作

如果问题是如何计算从API收到的地方的平均评级,那很简单:写一个循环并进行算术运算。如果你看一下小提琴,你会看到它有一个循环,它遍历API回调接收的results变量。小提琴中的循环为results的每个元素创建一个标记,但是你可以在那里做任何你想做的事情。只需将所有rating值相加,然后将总数除以results.length即可获得平均值。当然要检查长度是否为零,所以不要除以零。

例如,如果你有一个带有数组结果的results变量,你可以这样做:

var totalRating = 0;
results.forEach( function( place ) {
    totalRating += place.rating;
});
var averageRating = results.length == 0 ? 0 : totalRating / results.length;