迁移到新的地点详情

Places API 可以返回有关特定地点的详细信息。本页介绍了 Place 类（新版）和 PlacesService（旧版）中使用的地点详情之间的区别，并提供了一些代码段以供比较。下表列出了 Place 类和 PlacesService 在使用地点详情方面的一些主要区别：

PlacesService（旧版） Place（新）
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
方法需要使用回调来处理结果对象和 google.maps.places.PlacesServiceStatus 响应。 使用 Promise，并以异步方式运行。
方法需要进行 PlacesServiceStatus 检查。 无需状态检查，可以使用标准错误处理。
地点数据字段采用蛇形命名法。 地点数据字段采用驼峰式格式。
仅限于一组固定的地点类型和地点数据字段。 提供定期更新的地点类型和地点数据字段的更广泛选择。

代码比较

本部分比较了两段类似的代码，以说明地点服务和地点类之间的区别。这些代码段显示了各个 API 发出地点详情请求所需的代码，然后使用生成的地点数据向地图添加标记。

地点服务（旧版）

以下精简代码段展示了如何使用 PlacesService 发出地点详情请求。该请求使用回调，并包含对 PlacesServiceStatus 的必要条件检查。请求正文中指定了所需的地点数据字段。

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

了解详情

地点类（新）

以下精简代码段展示了如何使用 Place 类发出地点详情请求。请求是异步的，不包含状态检查（可以使用标准错误处理）。地点 ID 用于创建新的 Place 实例，该实例用于发出请求 (fetchFields())。在调用 fetchFields() 之前，系统不会传递所需的地点数据字段，这有助于提高灵活性。由于 fetchFields() 方法使用 await 运算符，因此只能在 async 函数内使用。

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

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

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

了解详情