Я пытаюсь отобразить изображение с помощью php для своего веб-сайта, который будет динамически отображать изображения прямо из API Google Адресов (ссылка 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 через браузер, он отобразит изображение, и это уже не тот URL, который вы видите.
Моя проблема в том, что при просмотре источника страницы это именно тот URL-адрес источника изображения, который вы видите, что плохо, потому что мой ключ затем публикуется. Как правильно отображать изображения, сохраняя при этом мой ключ закрытым? Я искал API и в Интернете для этого, но безрезультатно. Я видел некоторые хитрости с использованием file_get_contents и file_put_contents, но мой веб-хостинг не позволяет этого. Наконец, сохранение изображений противоречит правилам API, поэтому это не вариант.
Любые советы будут оценены. Заранее спасибо.
Вы можете отправить HEAD-запрос на конкретный URL-адрес и извлечь содержимое Location
-header:
<?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
также не допускается для внешних URL.
Другой вариант: используйте Maps-Javascript-API, запросите место, и ответ должен содержать желаемый URL (без использования ключа).
Демо-версия:
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]));
}
}
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;
}
<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>
Других решений пока нет …