#reactjs #google-maps #axios #xmlhttprequest #base64
#reactjs #google-карты #axios #xmlhttprequest #base64
Вопрос:
В настоящее время я застрял в попытке получить изображение из API Google Places, в документации указано, чтобы получить изображение, которое у вас есть https://maps.googleapis.com/maps/api/place/photo?maxwidth=400amp;photoreference=[imagereference]amp;key=[yourkey]
Затем это перенаправит вас на URL-адрес с фактическим изображением. Как мне выполнить этот процесс с помощью axios или fetch, поскольку я пытаюсь получить базовую версию изображения 64, чтобы я мог использовать ее в своем приложении react?
Ответ №1:
Если вы хотите показать фотографию Places API в клиентских приложениях, вам необходимо использовать фотографии Places из библиотеки Google Maps JavaScript Places.
Приведенный ниже фрагмент кода показывает пример того, как я получаю URL-адрес фотографии из getDetails
результата и помещаю его в свои переменные состояния:
const request = {
placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
fields: [
"name",
"formatted_address",
"place_id",
"geometry",
"photos"
]
};
const service = new google.maps.places.PlacesService(map);
service.getDetails(request, (place, status) => {
if (
status === google.maps.places.PlacesServiceStatus.OK amp;amp;
place amp;amp;
place.geometry amp;amp;
place.geometry.location
) {
const marker = new google.maps.Marker({
map,
position: place.geometry.location
});
}
this.setState({
photos: place.photos[0].getUrl(),
name: place.formatted_address
});
});
Вот пример кода, и чтобы увидеть эту работу, замените YOUR_API_KEY
из скрипта внутри Map.js
своим ключом API.