Перенести на новые фотографии места

Разработчики из Европейской экономической зоны (ЕЭЗ)

Функция «Фотографии мест» позволяет добавлять высококачественный фотоконтент на ваши веб-страницы. На этой странице объясняются различия между функциями добавления фотографий мест в классе Place (новая версия) и PlacesService (устаревшая версия), а также приводятся фрагменты кода для сравнения.

  • PlacesService (устаревшая версия) возвращает массив, содержащий до 10 объектов PlacePhoto в составе объекта PlaceResult для любого запроса getDetails() , если поле photos указано в запросе. В случае textSearch() и nearbySearch() по умолчанию возвращается фотография первого места, если она доступна.
  • Класс Place возвращает массив, содержащий до 10 объектов Photo , в рамках запроса fetchFields() , если поле photos указано в запросе.

В таблице ниже перечислены некоторые основные различия в использовании фотографий мест между классом Place и PlacesService :

PlacesService (Legacy) Place (Новое)
Интерфейс PlacePhoto Photo
PlacePhoto возвращает html_attributions в виде строки. Photo возвращает экземпляр AuthorAttribution .
Для работы этих методов требуется использование функции обратного вызова для обработки объекта результатов и ответа google.maps.places.PlacesServiceStatus . Использует промисы и работает асинхронно.
Для работы методов требуется проверка PlacesServiceStatus . Проверка состояния не требуется, можно использовать стандартную обработку ошибок. Подробнее .
PlacesService необходимо инициализировать с помощью элемента map или div. Place можно создать там, где это необходимо, без привязки к карте или элементу страницы.

Сравнение кода

В этом разделе сравнивается код для обработки фотографий мест, чтобы проиллюстрировать различия между службой Places и классом Place. Приведенные фрагменты кода показывают код, необходимый для запроса фотографий мест через каждый из соответствующих API.

Служба размещения (наследие)

Следующий фрагмент кода демонстрирует возврат фотографий с помощью PlacesService и отображение первой фотографии на странице. В этом примере запрос сведений о месте указывает идентификатор места, а также поля name и photos . Первая фотография отображается на странице после проверки статуса сервиса. При создании экземпляра PlacesService необходимо указать элемент map или div ; поскольку в этом примере карта отсутствует, используется элемент div .

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

Указание авторства в PlacesService

Сервис PlacesService возвращает необходимые данные об авторстве в виде строки html_attributions , содержащей URL-адрес страницы профиля автора в Google. Следующий фрагмент кода демонстрирует получение данных об авторстве для первого результата поиска по фотографии.

let attributionUrl = place.photos[0].html_attributions;

Узнать больше

Класс "Место" (новый)

Следующий фрагмент кода демонстрирует использование метода fetchFields() для получения сведений о месте, включая отображаемое имя и фотографии места. Сначала создается новый объект Place с использованием идентификатора места, затем вызывается метод fetchFields() , в котором указываются поля displayName и photos . После этого на странице отображается первая фотография места. При использовании класса Place нет необходимости проверять статус сервиса, поскольку это обрабатывается автоматически.

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({ fields: ['displayName','photos'] });

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Указание авторства в классе Place

Класс Place возвращает данные об авторстве в виде экземпляра AuthorAttribution , включающего имя автора, URI страницы профиля автора в Google и URI фотографии профиля автора. Следующий фрагмент кода демонстрирует получение данных об авторстве для первого результата — фотографии.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

Узнать больше