客户端JavaScript调用Google Places API获取商家评分遇跨域问题

安全阿岳

2026-6-28

解决Google商家评分跨域问题并插入到Div的简单实现

错误翻译

跨源请求被阻止：同源策略不允许读取外部资源。

问题原因

Google Places REST接口不支持浏览器端直接跨域请求，前端直接用fetch调用会触发同源策略限制。

最简单实现方案（用官方Maps JavaScript API）

步骤1：引入官方脚本

在HTML的<head>或<body>末尾添加（替换为你的API Key）：

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

步骤2：添加评分显示容器

在页面需要显示评分的位置插入：

<div id="rating-container"></div>

步骤3：编写获取评分的JS逻辑

const placeId = '你的商家Place ID';
const ratingContainer = document.getElementById('rating-container');

// 初始化Places服务（用隐藏容器，无需显示地图）
const service = new google.maps.places.PlacesService(document.createElement('div'));

// 请求商家评分数据
service.getDetails({
  placeId: placeId,
  fields: ['rating']
}, (place, status) => {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    // 将评分插入容器，可自定义样式
    ratingContainer.innerHTML = `<strong>商家评分：${place.rating}/5</strong>`;
  } else {
    console.error('获取评分失败:', status);
    ratingContainer.textContent = '无法获取商家评分';
  }
});