迁移到新的“地点照片”

欧洲经济区 (EEA) 开发者

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

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

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

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

代码比较

本部分比较了地点照片的代码，以说明地点服务和 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 会以 html_attributions 字符串的形式返回所需的作者署名，其中包含指向作者 Google 个人资料页面的网址。以下代码段展示了如何检索第一个照片结果的提供方信息数据。

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

了解详情

Place 类（新）

以下代码段展示了如何使用 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;

了解详情