Question

我正在使用jQuery googlePlaces插件，该插件通过输入PlaceId和API密钥来呈现google评论。它可以正确渲染普通评论，但我想知道如何使用相应的照片来渲染评论。

我已经遍历了API，看来API正在为我提供类似的照片：

"photos" : [
         {
            "height" : 1960,
            "html_attributions" : [
               "\u003ca href=\"https://maps.google.com/maps/contrib/108466408998685415628/photos\"\u003eBalaji Subramaniam\u003c/a\u003e"
            ],
            "photo_reference" : "CmRaAAAAa0HfNUafmCo_nSl_rnAfhIrTi7jXbhwH_1cQXuF-NzmQPiGksdQUcoV72uIsfhjDq-Mn2Vaef67hCsnHvePd-ZrD_mc-FAlAn9ppcSc_ldUwXLBW_iE2v_YPHw69ULUYEhDUGNFKJUiON0JbnoJiLEOMGhRhHoZ_S_IFcVVHbXFwAhb3felibw",
            "width" : 4032
         },
         ....
      ],

这是我的代码：

<section   class="content-wrapper-outer content-wrapper-b clearfix latest-news-section">
<div >
      <h3  class="center-title">Google Reviews</h3>
      <div id="gs" class="title-block2"></div>
  <div id="kryesore" style="height:400px;overflow-y: scroll;">    
<div id="google-reviews"></div>
</div>
<link rel="stylesheet" href="static/css/googleReviews.css" async>
<script src="https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js" async></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAgIApjP8qpCCXs5DwOpNSno96HO0Xg4A0"
        type="text/javascript" aync></script>

<style>
.review-author {
    text-transform: capitalize;
    font-weight: bold;
    font:black;

}
.review-text {
    line-height: 1.55;
    text-align: left;
    max-width: 32em;
    margin: auto;

    padding: 10px;
    border-radius: 2px;
}
  .review-item {
    border: solid 1px rgba(190,190,190,.35) !important;
    border-radius:2px!important;
    margin: 0 auto;

    margin-right:2px!important;
    display:block;
    color:black;
    padding: 1em;
    font-family:'Montserrat', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    flex: 1 1 20%;
}
.review-stars ul {
    display: inline-block;
    list-style: none !important;
    margin: 0;
    padding: 0;
}
.review-stars ul li{

    list-style-type: none !important;

}
.review-stars {
    text-align: center;
    font-size: 115%;
    list-style-type: none !important;
}
@media (max-width: 450px){
  .review-item {

    margin-top: 0.3%!important;
}
.review-author {
    text-transform: capitalize;
    font-weight: bold;
    font:black;

}
.review-text {
    line-height: 1.55;
    text-align: left;
    max-width: 32em;
    margin: auto;

    padding: 10px;
    border-radius: 2px;
}
  .review-item {
    border: solid 1px rgba(190,190,190,.35) !important;
    border-radius:2px!important;
    margin: 0 auto;

    margin-right:2px!important;
    display:block;
    color:black;
    padding: 1em;
    font-family:'Montserrat', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    flex: 1 1 50%;
}
.review-stars ul {
    display: inline-block;
    list-style: none !important;
    margin: 0;
    padding: 0;
}
.review-stars ul li{

    list-style-type: none !important;

}
.review-stars {
    text-align: center;
    font-size: 115%;
    list-style-type: none !important;
}}



</style>

<script>
$(document).ready(function() {
    try{
        setTimeout(function(){                      

        $("#google-reviews").googlePlaces({
            placeId: 'ChIJjYRZfPHvDDkR8PWD4_H2SOk' //Find placeID @: https://developers.google.com/places/place-id
          , render: ['reviews']
          , min_rating: 4
            , max_rows: 4
            , schema: {
                displayElement: '#schema' // optional, will use "#schema" by default
                , beforeText: 'Googlers rated'
                , middleText: 'based on'
                , afterText: 'awesome reviewers.'
                , type: 'Hostel'
                , image: 'https://via.placeholder.com/150'
                , priceRange: '$$'
            }
        });
        }, 300);
    }
    catch(e){
        console.log("error in loading google reviews"+e.message);
    }
});
</script>
<a style="float:right;color:blue;" target="_blank"
    href="https://www.google.co.in/search?q=picntic+travels&oq=Picn&aqs=chrome.5.69i60l3j69i57j35i39l2.3064j0j1&sourceid=chrome&ie=UTF-8#lrd=0x390ceff17c59848d:0xe948f6f1e383f5f0,1,,,"><u><b>Read
            all Reviews</b></u></a>
<!--https://www.google.co.in/search?q=picntic+travels&oq=Picn&aqs=chrome.5.69i60l3j69i57j35i39l2.3064j0j1&sourceid=chrome&ie=UTF-8#lrd=0x390ceff17c59848d:0xe948f6f1e383f5f0,1,,,-->
<!-- END .content-wrapper-outer -->
</div>
</section>


<!--Test Schema HTML-->
<span itemscope="" itemtype="http://schema.org/Hostel">
    <meta itemprop="image" content="https://via.placeholder.com/150">
    <meta itemprop="priceRange" content="$$">
    <meta itemprop="url" content="https://example.org">
    <meta itemprop="telephone" content="(303) 954-0962">
    <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress" style="display: none;">
      <span class="street-address" itemprop="streetAddress">1217 20th St</span>,
      <span class="locality" itemprop="addressLocality">Denver</span>,
      <span class="region" itemprop="addressRegion">CO</span>
      <span class="postal-code" itemprop="postalCode">80202</span>,
      <span class="country-name" itemprop="addressCountry">USA</span>
    </div>
    Google Users Have Rated
    <span itemprop="name">Hostel Fish</span>
    <span itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
      <span itemprop="ratingValue">4.80</span>/<span itemprop="bestRating">5</span>
      based on <span itemprop="ratingCount">5</span>
      ratings and reviews
    </span>
  </span>

我想知道如何使用相应的照片渲染Google评论。

Answer 1

像这样吗？

<section   class="content-wrapper-outer content-wrapper-b clearfix latest-news-section">
<div >
      <h3  class="center-title">Google Reviews</h3>
      <div id="gs" class="title-block2"></div>
  <div id="kryesore" style="height:400px;overflow-y: scroll;">    
<div id="reviewsmaker"></div>
</div>

<script src="https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js" async></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAgIApjP8qpCCXs5DwOpNSno96HO0Xg4A0"
        type="text/javascript" aync></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" data-placeid="ChIJjYRZfPHvDDkR8PWD4_H2SOk" src="https://gmb.reviewsmaker.com/widget/reviews.js"></script>


<a style="float:right;color:blue;" target="_blank"
    href="https://www.google.co.in/search?q=picntic+travels&oq=Picn&aqs=chrome.5.69i60l3j69i57j35i39l2.3064j0j1&sourceid=chrome&ie=UTF-8#lrd=0x390ceff17c59848d:0xe948f6f1e383f5f0,1,,,"><u><b>Read
            all Reviews</b></u></a>
<!--https://www.google.co.in/search?q=picntic+travels&oq=Picn&aqs=chrome.5.69i60l3j69i57j35i39l2.3064j0j1&sourceid=chrome&ie=UTF-8#lrd=0x390ceff17c59848d:0xe948f6f1e383f5f0,1,,,-->
<!-- END .content-wrapper-outer -->
</div>
</section>


<!--Test Schema HTML-->
<span itemscope="" itemtype="http://schema.org/Hostel">
    <meta itemprop="image" content="https://via.placeholder.com/150">
    <meta itemprop="priceRange" content="$$">
    <meta itemprop="url" content="https://example.org">
    <meta itemprop="telephone" content="(303) 954-0962">
    <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress" style="display: none;">
      <span class="street-address" itemprop="streetAddress">1217 20th St</span>,
      <span class="locality" itemprop="addressLocality">Denver</span>,
      <span class="region" itemprop="addressRegion">CO</span>
      <span class="postal-code" itemprop="postalCode">80202</span>,
      <span class="country-name" itemprop="addressCountry">USA</span>
    </div>
    Google Users Have Rated
    <span itemprop="name">Hostel Fish</span>
    <span itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
      <span itemprop="ratingValue">4.80</span>/<span itemprop="bestRating">5</span>
      based on <span itemprop="ratingCount">5</span>
      ratings and reviews
    </span>
  </span>

如何使用照片添加Google评论？

1 个答案: