我如何显示照片从谷歌的地方照片api在html中使用javascript


How do I display a photo from google place photo api in html using javascript?

如果我在浏览器中执行这个google place照片请求,我将看到一些树的漂亮图片。

https://maps.googleapis.com/maps/api/place/photo?key={put-your-key-here}&photoreference=CoQBdwAAAKtaIUhI41LsoH2TgYqHX1RFwaqEDdGbgsF6PRo8g4oHg6GdN24hw8NevRjKjyuQku3paCsDpP-gDCCUULx0phzahqoHTSHKg09B_NTv6n9Aa1hBOJ-8HnCV2WCxA_jtK5eICAnU324HYLCbK0JIWOkNLUIDLvEaqMKrxLYp_80ZEhAY9wYpjTUcfoJHLRbp4BoOGhTGSt0ozo-SvP1DJMJCOj1y2gDwEA&maxheight=200

但是当我向同一个url发出php请求时,我不理解我得到的响应。这不是一个图像url,我可以插入到我的网页显示图像。

我如何获得与此photo_reference相关联的照片并将其插入我的网页?是否有一种方法可以从这张照片的图像获取url,这样我就可以设置一个<img>标签的src ?

请不要使用javascript api。下面是我看到的一个例子:

$response = $client->request('GET', 'https://maps.googleapis.com/maps/api/place/photo?key={your-key-here}&photoreference=CoQBdwAAAKtaIUhI41LsoH2TgYqHX1RFwaqEDdGbgsF6PRo8g4oHg6GdN24hw8NevRjKjyuQku3paCsDpP-gDCCUULx0phzahqoHTSHKg09B_NTv6n9Aa1hBOJ-8HnCV2WCxA_jtK5eICAnU324HYLCbK0JIWOkNLUIDLvEaqMKrxLYp_80ZEhAY9wYpjTUcfoJHLRbp4BoOGhTGSt0ozo-SvP1DJMJCOj1y2gDwEA&maxheight=200', []);
var_dump($response);
// Result:
object(GuzzleHttp'Psr7'Response)[228]
  private 'reasonPhrase' => string 'OK' (length=2)
  private 'statusCode' => int 200
  private 'headers' => 
  array (size=14)
  'Access-Control-Expose-Headers' => 
    array (size=1)
      0 => string 'Content-Length' (length=14)
  'ETag' => 
    array (size=1)
      0 => string '"v42c8"' (length=7)
  'Expires' => 
    array (size=1)
      0 => string 'Sat, 29 Oct 2016 20:08:08 GMT' (length=29)
  'Cache-Control' => 
    array (size=1)
      0 => string 'public, max-age=86400, no-transform' (length=35)
  'Content-Disposition' => 
    array (size=1)
      0 => string 'inline;filename="2016-09-25.jpg"' (length=32)
  'Content-Type' => 
    array (size=1)
      0 => string 'image/jpeg' (length=10)
  'Vary' => 
    array (size=1)
      0 => string 'Origin' (length=6)
  'Access-Control-Allow-Origin' => 
    array (size=1)
      0 => string '*' (length=1)
  'X-Content-Type-Options' => 
    array (size=1)
      0 => string 'nosniff' (length=7)
  'Date' => 
    array (size=1)
      0 => string 'Fri, 28 Oct 2016 20:08:08 GMT' (length=29)
  'Server' => 
    array (size=1)
      0 => string 'fife' (length=4)
  'Content-Length' => 
    array (size=1)
      0 => string '33691' (length=5)
  'X-XSS-Protection' => 
    array (size=1)
      0 => string '1; mode=block' (length=13)
  'Alt-Svc' => 
    array (size=1)
      0 => string 'quic=":443"; ma=2592000; v="36,35,34"' (length=37)
private 'headerNames' => 
array (size=14)
  'access-control-expose-headers' => string 'Access-Control-Expose-Headers' (length=29)
  'etag' => string 'ETag' (length=4)
  'expires' => string 'Expires' (length=7)
  'cache-control' => string 'Cache-Control' (length=13)
  'content-disposition' => string 'Content-Disposition' (length=19)
  'content-type' => string 'Content-Type' (length=12)
  'vary' => string 'Vary' (length=4)
  'access-control-allow-origin' => string 'Access-Control-Allow-Origin' (length=27)
  'x-content-type-options' => string 'X-Content-Type-Options' (length=22)
  'date' => string 'Date' (length=4)
  'server' => string 'Server' (length=6)
  'content-length' => string 'Content-Length' (length=14)
  'x-xss-protection' => string 'X-XSS-Protection' (length=16)
  'alt-svc' => string 'Alt-Svc' (length=7)
  private 'protocol' => string '1.1' (length=3)
  private 'stream' => 
  object(GuzzleHttp'Psr7'Stream)[226]
  private 'stream' => resource(17, stream)
  private 'size' => null
  private 'seekable' => boolean true
  private 'readable' => boolean true
  private 'writable' => boolean true
  private 'uri' => string 'php://temp' (length=10)
  private 'customMetadata' => 
    array (size=0)
      empty

似乎您正在使用php Guzzle库来发出请求。Guzzle Client对象的请求函数返回一个对象。它有一个函数调用getBody,它返回响应的主体。下面的代码应该可以工作:

$response = $client->request('GET', 'https://maps.googleapis.com/maps/api/place/photo?key={your-key-here}&photoreference=CoQBdwAAAKtaIUhI41LsoH2TgYqHX1RFwaqEDdGbgsF6PRo8g4oHg6GdN24hw8NevRjKjyuQku3paCsDpP-gDCCUULx0phzahqoHTSHKg09B_NTv6n9Aa1hBOJ-8HnCV2WCxA_jtK5eICAnU324HYLCbK0JIWOkNLUIDLvEaqMKrxLYp_80ZEhAY9wYpjTUcfoJHLRbp4BoOGhTGSt0ozo-SvP1DJMJCOj1y2gDwEA&maxheight=200', []);
echo $response->getBody();

如果我理解正确的话:

<?php 
  $image = imagecreatefromstring(file_get_contents('https://maps.googleapis.com/maps/api/place/photo?key={PutYourKeyHere}&photoreference=CoQBdwAAAKtaIUhI41LsoH2TgYqHX1RFwaqEDdGbgsF6PRo8g4oHg6GdN24hw8NevRjKjyuQku3paCsDpP-gDCCUULx0phzahqoHTSHKg09B_NTv6n9Aa1hBOJ-8HnCV2WCxA_jtK5eICAnU324HYLCbK0JIWOkNLUIDLvEaqMKrxLYp_80ZEhAY9wYpjTUcfoJHLRbp4BoOGhTGSt0ozo-SvP1DJMJCOj1y2gDwEA&maxheight=200'));
  header('Content-Type: image/png');
  imagepng($image);
?>