如何使用 javascript 在网站上显示 Google 个地方的评论

Question

我想在网站上显示对我工作的公司的所有 google 评论，但我似乎无法让它发挥作用。我尝试为此使用以下代码：

<script>
    $(function() {
        var people = [];
        $.getJSON('https://maps.googleapis.com/maps/api/place/details/json?placeid=<?php echo $placeId ?>&key=<?php echo $api_key ?>', function(data) {
            $.each(data.reviews, function(i, f) {
                var tblRow = "<tr>" + "<td>" + f.author_name + "</td>" +
                "<td>" + f.rating + "</td>" + "<td>" + f.relative_time_description + "</td>" + "<td>" + f.text + "</td>" + "</tr>"
                $(tblRow).appendTo("#google-reviews");
            });
        });
    });
</script>

在这里，我应该得到类似于此 json 文件的响应：

{
   "html_attributions" : [],
   "result" : {
      ...
      "rating" : 4.5,
      "reference" : "CmRSAAAAjiEr2_A4yI-DyqGcfsceTv-IBJXHB5-W3ckmGk9QAYk4USgeV8ihBcGBEK5Z1w4ajRZNVAfSbROiKbbuniq0c9rIq_xqkrf_3HpZzX-pFJuJY3cBtG68LSAHzWXB8UzwEhAx04rgN0_WieYLfVp4K0duGhTU58LFaqwcaex73Kcyy0ghYOQTkg",
      "reviews" : [
         {
            "author_name" : "Robert Ardill",
            "author_url" : "https://www.google.com/maps/contrib/106422854611155436041/reviews",
            "language" : "en",
            "profile_photo_url" : "https://lh3.googleusercontent.com/-T47KxWuAoJU/AAAAAAAAAAI/AAAAAAAAAZo/BDmyI12BZAs/s128-c0x00000000-cc-rp-mo-ba1/photo.jpg",
            "rating" : 5,
            "relative_time_description" : "a month ago",
            "text" : "Awesome offices. Great facilities, location and views. Staff are great hosts",
            "time" : 1491144016
         }
      ],
      "types" : [ "point_of_interest", "establishment" ],
      "url" : "https://maps.google.com/?cid=10281119596374313554",
      "utc_offset" : 600,
      "vicinity" : "5, 48 Pirrama Road, Pyrmont",
      "website" : "https://www.google.com.au/about/careers/locations/sydney/"
   },
   "status" : "OK"
}

每次出现以下 2 个错误：

https://maps.googleapis.com/maps/api/place/details/json?placeid={placeid}&key={apikey} net::ERR_FAILED
Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/details/json?placeid={placeid}&key={apikey}' from origin '{the site I work on}' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

有没有人知道如何解决这个问题？

Answer 1

据我所知，要通过客户端应用程序使用地点详情，您应该使用地图中的地点库 JavaScript API。这是文档： https://developers.google.com/maps/documentation/javascript/places

因此，首先您需要包含 Google 地图 api 并启用了地点库和地图容器：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<body>
    <div id="map"></div>
    <div id="google-reviews"></div>
</body>

然后执行请求：

<script>
var request = {
  placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
};

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    console.log(place);
        $.each(place.reviews, function(i, f) {
        var tblRow = "<tr>" + "<td>" + f.author_name + "</td>" +
        "<td>" + f.rating + "</td>" + "<td>" + f.relative_time_description + "</td>" + "<td>" + f.text + "</td>" + "</tr>"
        $(tblRow).appendTo("#google-reviews");
    });

  }
}
</script>

示例如下： https://jsfiddle.net/scarabs/we541sqg/1/

Answer 2

我用不同的方式完成了它，我创建了一个名为 googleData.php 的文件，我将使用 cron 作业每天执行两次，代码如下：

<?php 
include 'config.php';
$api_key = $config["apikey"];
$placeId = $config["locationId"];
$response = file_get_contents("https://maps.googleapis.com/maps/api/place/details/json?placeid=$placeId&fields=name,rating,reviews&key=$api_key");
//$json = str_replace(array("\n", "\r"), ' ', $response);

$fp = fopen('googleData.json', 'w');
fwrite($fp, $response);
    fclose($fp);
?>

这在文件 googleData.json 中给出了以下响应：

  {
   "html_attributions" : [],
   "result" : {
      "name" : "name",
      "rating" : 4.7,
      "reviews" : [
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         },
         {
            "author_name" : "NAME",
            "author_url" : "URL",
            "language" : "en",
            "profile_photo_url" : "PHOTO_URL",
            "rating" : 5,
            "relative_time_description" : "5 months ago",
            "text" : "Very helpful.",
            "time" : 1570537557
         }
      ]
   },
   "status" : "OK"
}

然后我可以在另一个名为 getreviews.php 的文件中使用它，该文件具有以下代码：

var json = $.getJSON("googleData.json", function(response) {
    var result = response.result;
})

我能够显示从 google.

获得的 json 的每个值

对于那些好奇的人，这是我在 config.php:

<?php
    $config["apikey"] = "API_KEY";
    $config["locationId"] = "PLACE_ID";
?>

如何使用 javascript 在网站上显示 Google 个地方的评论

How to show Google places reviews on site using javascript

javascript

json

google-places-api