Question

我正在尝试使用php为我的网站渲染图片，该图片将直接从Google Places API动态显示图片（参考https://developers.google.com/places/web-service/photos?hl=en）图像源类似于以下示例：

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU&key=API_KEY

如果您通过浏览器访问此网址，则会呈现图片，而这不再是您看到的网址。

我的问题是，在查看页面源时，这正是您看到的图像源URL，因为我的密钥会被公开。在保持密钥私密的同时呈现图像的正确方法是什么？我已经搜索了API和网络，但无济于事。我确实看到了一些使用file_get_contents和file_put_contents的技巧但我的网站主机不允许这样做。最后，保存图像是违反api规则的，因此这不是一种选择。

任何提示将不胜感激。提前谢谢。

Answer 1

您可以向特定网址发送HEAD请求并提取Location标题的内容：

<?php

  $context  = stream_context_create(array('http' =>array('method'=>'HEAD')));
  $fp = fopen('desiredPlacesApiImgUrl', 'rb', false, $context);
  $meta = stream_get_meta_data($fp);

  if(isset($meta['wrapper_data'])){
    $location=preg_grep('@^\s*Location:@',$meta['wrapper_data']);

    if(count($location)){
       $imgUrl=trim(preg_replace('@^Location:@i','',reset($location)));
      die($imgUrl);//the desired img-url
    }

  }
  fclose($fp);

?>

但是当您的服务器上不允许file_get_contents时，我担心fopen也不允许使用外部网址。

另一种选择：使用Maps-Javascript-API，请求地点，响应应包含所需的URL（不使用任何键）。

演示：

＆＃13;

function loadPlacePhotos() {
  var photos = document.querySelectorAll('img[data-place]'),
    service = new google.maps.places
    .PlacesService(document.createElement('div'));
  for (var i = 0; i < photos.length; ++i) {
    (function(photo) {
      service.getDetails({
        placeId: photo.getAttribute('data-place')
      }, function(r) {
        if (r.photos.length) {
          google.maps.event.addDomListener(photo, 'click', function() {
            photo.setAttribute('src', r.photos[0].getUrl({
              maxHeight: 100
            }));
            photo.style.visibility = 'visible';
            if (r.photos.length > 1) {
              r.photos.push(r.photos.shift());
              photo.setAttribute('title', 'click to see next photo');
              photo.style.cursor = 'pointer';
            } else {
              google.maps.event.clearListeners(photo, 'click');
            }
          });
          google.maps.event.trigger(photo, 'click');
        }
      });


    }(photos[i]));
  }
}

＆＃13;

body::before {
        content: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white2.png);
      }
      img[data-place] {
        visibility: hidden;
        display: block;
      }

＆＃13;

<ul>
  <li>
    Google: Mountain View
    <img data-place="ChIJj61dQgK6j4AR4GeTYWZsKWw" />
  </li>
  <li>
    Google: Sydney
    <img data-place="ChIJN1t_tDeuEmsRUsoyG83frY4" />
  </li>
  <li>
    Google: Berlin
    <img data-place="ChIJReW1rcRRqEcRaY3CuKBdqZE" />
  </li>
</ul>
<script defer src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=loadPlacePhotos"></script>

＆＃13;

该演示使用图片data-place的自定义属性，该属性将分配给特定地点的placeId。它解析这些图像，请求照片并显示它们（当有超过1张照片时，用户可以通过点击图像在照片之间切换）

但是，当您的密钥可见时，它必定不是问题，为您的（浏览器）密钥设置允许的引用，并且您可以在您自己的域中使用该密钥而不存在风险。

Google Places APi照片

1 个答案: