能否通过Google Maps API获取展示POI详情？能否在地图内直接展示详情无需跳转？

1. 能否通过Google Maps API获取并展示POI的详细信息？ #

当然可以！Google Maps Platform提供了专门的Place Details API来获取兴趣点（POI）的详细信息，你能拿到的内容包括但不限于：POI名称、完整地址、评分、营业时间、联系方式、用户评论、照片等。

使用时需要注意几个点：

• 得先申请有效的Google Maps API密钥，并且确保已经启用了Place Details API服务
• 调用API时需要传入目标POI的place_id（这个可以通过Place Search API先搜索获取到）
• 要留意API的调用配额和计费规则，避免超出限制导致服务中断

给你个简单的JavaScript调用示例参考：

// 初始化Place服务
const service = new google.maps.places.PlacesService(map);
// 获取指定POI的详情
service.getDetails({
  placeId: '目标POI的place_id',
  fields: ['name', 'formatted_address', 'rating', 'opening_hours', 'photos']
}, (place, status) => {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    // 处理获取到的POI数据
    console.log(`名称：${place.name}，地址：${place.formatted_address}`);
  }
});

2. 能否直接在地图中展示POI详情，无需跳转至新页面？ #

完全没问题！你可以借助Google Maps API里的InfoWindow组件，把获取到的POI详情直接渲染在地图的弹窗里，不用跳转到外部页面。

具体实现思路是这样的：

• 先通过Place Details API拿到POI的完整数据
• 自定义InfoWindow的HTML内容，把需要展示的信息（比如名称、地址、评分、照片等）按照你想要的格式（类似图2的布局）拼接成HTML字符串
• 把这个自定义的InfoWindow绑定到地图上的POI标记（Marker）上，或者在地图加载时直接指定位置显示

示例代码如下：

// 创建InfoWindow实例
const infoWindow = new google.maps.InfoWindow();

// 获取POI详情后渲染到InfoWindow
service.getDetails({
  placeId: '目标POI的place_id',
  fields: ['name', 'formatted_address', 'rating', 'photos']
}, (place, status) => {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    // 自定义详情内容的HTML结构
    const content = `
      <div class="poi-detail-card">
        <h3>${place.name}</h3>
        <p><strong>地址：</strong>${place.formatted_address}</p>
        <p><strong>评分：</strong>${place.rating}/5</p>
        ${place.photos ? `<img src="${place.photos[0].getUrl({maxWidth: 200})}" alt="${place.name}的照片">` : ''}
      </div>
    `;
    // 设置InfoWindow内容并在地图上打开
    infoWindow.setContent(content);
    infoWindow.open(map, marker); // marker是地图上的POI标记，也可以用setPosition指定坐标直接显示
  }
});

你还可以通过CSS自定义这个InfoWindow的样式，让它的外观和图2的详情页面保持一致，这样用户在地图上就能直接查看完整的POI信息，完全不用跳转页面~

内容的提问来源于stack exchange，提问作者ebody