地点详情(新)

请选择平台: Android iOS JavaScript 网络服务
欧洲经济区 (EEA) 开发者

提取字段

如果您已有 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 等热门框架或完全不使用框架。