提取字段
如果您已有 Place
对象或地点 ID,请使用 Place.fetchFields()
方法获取有关该地点的详细信息。提供要返回的地点数据字段的逗号分隔列表;字段名称采用驼峰命名法。使用返回的 Place
对象获取所请求字段的数据。
以下示例使用地点 ID 创建新的 Place
,调用请求 displayName
和 formattedAddress
字段的 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, }); }
Map
和 Place
已在此函数之前声明:
const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");
使用地点概览组件
“地点概览”组件可在预先创建的界面中显示数百万家商家的详细信息,包括营业时间、星级评价和照片,以及路线和其他操作,并且有 5 种尺寸和格式可供选择。它是 Google Maps Platform 的扩展组件库的一部分,该库包含一组 Web 组件,可帮助开发者更快速地构建更出色的地图和位置地图项。
使用地点概览配置器为自定义地点概览组件创建可嵌入的代码,然后将其导出以与 React 和 Angular 等热门框架搭配使用,或根本不使用任何框架。