Как получить изображение из API Google places?

#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.