如何通过Google Maps API动态获取地点评分与评论？解决实现疑问

一、实现接收placeId/纬度/经度的评论获取函数 #

直接编写可复用的函数，无需依赖script标签的callback，具体实现如下：

核心函数代码 #

// 接收placeId、纬度、经度三个参数，获取地点评分与前5条评论
function getPlaceReviews(placeId, lat, lng) {
  // 临时创建隐藏容器，用于初始化PlacesService（无需显示地图）
  const serviceContainer = document.createElement('div');
  serviceContainer.style.display = 'none';
  document.body.appendChild(serviceContainer);

  // 初始化Places服务
  const placesService = new google.maps.places.PlacesService(serviceContainer);

  // 请求地点详情，仅获取需要的字段（减少请求负载）
  placesService.getDetails({
    placeId: placeId,
    fields: ['name', 'rating', 'reviews']
  }, (placeResult, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      // 提取前5条评论
      const top5Reviews = placeResult.reviews ? placeResult.reviews.slice(0, 5) : [];
      
      // 这里可根据需求将数据渲染到页面，示例如下：
      const targetContainer = document.getElementById(`reviews-${placeId}`);
      if (targetContainer) {
        // 渲染评分
        targetContainer.innerHTML = `<h4>${placeResult.name} | 评分: ${placeResult.rating}/5</h4>`;
        // 渲染每条评论
        top5Reviews.forEach(review => {
          targetContainer.innerHTML += `
            <div class="review-card">
              <div class="review-header">
                <span class="author">${review.author_name}</span>
                <span class="stars">${'★'.repeat(review.rating)}${'☆'.repeat(5 - review.rating)}</span>
              </div>
              <p class="review-text">${review.text}</p>
              <small class="review-date">${new Date(review.time * 1000).toLocaleDateString()}</small>
            </div>
          `;
        });
      }
    } else {
      console.error(`获取地点${placeId}数据失败: ${status}`);
    }

    // 用完临时容器后移除
    document.body.removeChild(serviceContainer);
  });
}

注：若仅通过placeId即可定位地点，纬度和经度参数可作为备用校验字段，无需强制使用。

调用方式 #

1. 加载Google Places API（无需指定callback）：

<script async src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>

2. 从JSON数据中循环调用函数：

// 假设你的地点JSON数据
const businessPlaces = [
  { placeId: 'ChIJ...', lat: 39.9042, lng: 116.4074 },
  { placeId: 'ChIJ...', lat: 31.2304, lng: 121.4737 }
];

// 等待API加载完成后执行
window.addEventListener('load', () => {
  businessPlaces.forEach(place => {
    getPlaceReviews(place.placeId, place.lat, place.lng);
  });
});

二、关于map元素的疑问 #

不需要保留id为“map”的元素。PlacesService仅需要一个DOM容器完成初始化，但这个容器可以是临时创建的隐藏元素（如上述代码中的serviceContainer），无需显示在页面上，也不需要固定id为“map”。

之前移除callback后失败，大概率是因为API加载完成后没有触发函数执行，或是未正确初始化PlacesService的容器元素。使用上述方式，通过window.load事件监听API加载完成状态，再调用函数即可解决问题。

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