迁移到新的“地点照片”

借助地点照片，您可以向网页添加高品质照片内容。本页介绍了 Place 类（新版）和 PlacesService（旧版）中地点照片功能之间的区别，并提供了一些代码段以供比较。

  • 如果请求中指定了 photos 字段，PlacesService（旧版）会针对任何 getDetails() 请求返回一个包含最多 10 个 PlacePhoto 对象的数组，作为 PlaceResult 对象的一部分。对于 textSearch() 和 nearbySearch()，系统会默认返回第一张地点照片（如果有）。
  • 如果请求中指定了 photos 字段，Place 类会在 fetchFields() 请求中返回最多 10 个 Photo 对象的数组。

下表列出了 Place 类和 PlacesService 在使用地点照片方面的一些主要区别：

PlacesService（旧版） Place（新）
PlacePhoto 接口 Photo 类
PlacePhoto 会以字符串的形式返回 html_attributions。 Photo 会返回一个 AuthorAttribution 实例。
方法需要使用回调来处理结果对象和 google.maps.places.PlacesServiceStatus 响应。 使用 Promise，并以异步方式运行。
方法需要进行 PlacesServiceStatus 检查。 无需状态检查，可以使用标准错误处理。
必须使用 Map 或 div 元素实例化 PlacesService。 Place 可在需要时随时实例化，而无需引用地图或页面元素。

代码比较

本部分将比较地点照片的代码，以说明地点服务和地点类之间的区别。代码段显示了在各个 API 上请求地点照片所需的代码。

地点服务（旧版）

以下代码段展示了使用 PlacesService 返回照片，并在页面上显示第一张照片结果。在此示例中，“地点详情”请求指定了地点 ID 以及 name 和 photos 字段。然后，系统会在检查服务状态后在页面上显示第一张照片。实例化 PlacesService 时，必须指定地图或 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 会将必需的作者归属信息作为一个包含指向作者 Google 个人资料页面的网址的 html_attributions 字符串返回。以下代码段展示了如何检索第一个照片结果的归因数据。

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

了解详情

地点类（新）

以下代码段展示了如何使用 fetchFields() 方法返回地点详细信息，包括显示名称和地点照片。首先，使用地点 ID 实例化新的 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 实例返回，其中包含作者的姓名、作者的 Google 个人资料页面的 URI 以及作者的个人资料照片的 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;

了解详情