迁移到新的“地点照片”

欧洲经济区 (EEA) 开发者

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

  • PlacesService（旧版）会返回最多 10 PlacePhoto 个对象组成的数组，作为 PlaceResult 对象的一部分，适用于任何 getDetails() 请求，前提是请求中指定了 photos 字段。对于 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 可以在需要时实例化，而无需引用地图或页面元素。

代码比较

本部分比较了地点照片的代码，以说明 Places Service 和 Place 类之间的区别。这些代码段展示了在每个相应 API 上请求地点照片所需的代码。

Places Service（旧版）

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

了解详情