地点详情

请选择平台: Android iOS JavaScript 网络服务

提取字段

如果您已有 Place 对象或地点 ID,请使用 Place.fetchFields() 方法获取有关该地点的详细信息。提供要返回的地点数据字段的逗号分隔列表;字段名称采用驼峰命名法。使用返回的 Place 对象获取所请求字段的数据。

以下示例使用地点 ID 创建新的 Place,调用请求 displayNameformattedAddress 字段的 Place.fetchFields(),将标记添加到地图,并将一些数据记录到控制台。

TypeScript

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

    // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}

JavaScript

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

  // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}
请注意,MapPlace 已在此函数之前声明:
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
查看完整示例

使用地点概览组件

“地点概览”组件可在预先创建的界面中显示数百万家商家的详细信息,包括营业时间、星级评价和照片,以及路线和其他操作,并且有 5 种尺寸和格式可供选择。它是 Google Maps Platform 的扩展组件库的一部分,该库包含一组 Web 组件,可帮助开发者更快速地构建更出色的地图和位置地图项。

使用地点概览配置器为自定义地点概览组件创建可嵌入的代码,然后将其导出以与 React 和 Angular 等热门框架搭配使用,或根本不使用任何框架。