React应用中基于Google Places Library获取商家联系信息的技术问询

我之前帮不少开发者解决过类似的问题，其实**Places Library（Maps JavaScript API内置的Places服务）**就是你要找的客户端方案，完全能避开CORS问题，同时返回你需要的商家信息。下面直接给你一个可运行的示例，刚好匹配你的需求：用户输入关键词后，搜索并展示商家的详情、地址、电话和网站列表。

步骤1：加载带Places Library的Maps JavaScript API #

首先在你的HTML页面里引入API，记得替换成你自己的API密钥，并且加上libraries=places参数（这是启用Places服务的关键）：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initSearch"></script>

步骤2：实现搜索功能与结果渲染 #

下面是完整的JavaScript代码，包含搜索逻辑和结果展示：

// 初始化搜索服务
function initSearch() {
  // 获取页面元素：输入框、搜索按钮、结果容器
  const searchInput = document.getElementById('search-input');
  const searchBtn = document.getElementById('search-btn');
  const resultsContainer = document.getElementById('results-container');

  // 创建PlacesService实例（不需要显示地图，用一个隐藏的div就行）
  const service = new google.maps.places.PlacesService(document.createElement('div'));

  // 搜索按钮点击事件
  searchBtn.addEventListener('click', () => {
    const query = searchInput.value.trim();
    if (!query) return;

    // 调用textSearch方法执行文本搜索
    service.textSearch({
      query: query,
      // 可选：添加位置范围限制，比如附近搜索
      // location: new google.maps.LatLng(37.7749, -122.4194),
      // radius: 5000
    }, (results, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        // 清空之前的结果
        resultsContainer.innerHTML = '';
        // 遍历结果并渲染成目录列表
        results.forEach(place => {
          const placeCard = document.createElement('div');
          placeCard.className = 'place-card';
          placeCard.innerHTML = `
            <h3>${place.name}</h3>
            <p><strong>地址:</strong> ${place.formatted_address || '无地址信息'}</p>
            <p><strong>电话:</strong> ${place.formatted_phone_number || '无电话信息'}</p>
            <p><strong>网站:</strong> ${place.website ? `<a href="${place.website}" target="_blank">${place.website}</a>` : '无网站信息'}</p>
            <p><strong>评分:</strong> ${place.rating || '无评分'}</p>
          `;
          resultsContainer.appendChild(placeCard);
        });
      } else {
        resultsContainer.innerHTML = `<p>搜索失败：${status}</p>`;
      }
    });
  });
}

步骤3：对应的HTML结构 #

搭配上面的JS，你需要的基础HTML结构如下：

<input type="text" id="search-input" placeholder="输入商家名称或关键词...">
<button id="search-btn">搜索商家</button>
<div id="results-container" style="margin-top: 20px;"></div>

<!-- 可选：给结果卡片加一点基础样式 -->
<style>
  .place-card {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
  }
  .place-card h3 {
    margin-top: 0;
    color: #2c3e50;
  }
</style>

关键说明 #

• 为什么能避开CORS？因为这个库是通过Google的官方脚本加载的，所有API请求都是从Google的域名发起的，不会触发浏览器的CORS限制。
• 你需要的字段：name（商家名称）、formatted_address（格式化地址）、formatted_phone_number（电话号码）、website（网站）都在返回的place对象里，直接提取即可。
• 如果需要更详细的商家信息（比如营业时间、照片），可以在拿到place_id后调用getDetails方法获取更多数据。
• 注意API密钥的安全：在Google Cloud控制台给你的API密钥设置HTTP限制，只允许你的域名调用，避免密钥被滥用。

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