Google Places在React本地/set-location路由页面失效问题求助

这个问题是单页应用（SPA）里很常见的坑——因为客户端路由跳转不会重新加载整个index.html页面，Google Places脚本虽然在首页加载时成功引入了，但你的Places功能初始化逻辑大概率只在页面首次加载时执行了一次。当跳转到/set-location路由时，新渲染的组件对应的DOM元素并没有被重新绑定Places控件，自然就失效了。

下面给你几个针对性的解决方案，按推荐优先级排序：

1. 在目标组件的生命周期中初始化Places功能 #

把Places的初始化逻辑直接放到/set-location对应的组件（比如SetLocation.js）里，利用组件的挂载钩子（React用useEffect，Vue用mounted），针对当前组件的DOM元素绑定Places控件。以React为例：

import { useEffect, useRef } from 'react';

const SetLocation = () => {
  // 引用需要绑定Autocomplete的输入框
  const locationInputRef = useRef(null);

  useEffect(() => {
    let autocompleteInstance = null;

    // 初始化Places自动完成控件
    const initPlacesAutocomplete = () => {
      if (!window.google?.maps?.places || !locationInputRef.current) return;
      
      autocompleteInstance = new window.google.maps.places.Autocomplete(
        locationInputRef.current,
        { types: ['geocode'], componentRestrictions: { country: 'us' } } // 可按需配置
      );

      // 绑定地点选择事件
      autocompleteInstance.addListener('place_changed', () => {
        const selectedPlace = autocompleteInstance.getPlace();
        // 在这里处理选中的地点数据，比如获取经纬度、地址等
        console.log('Selected place:', selectedPlace);
      });
    };

    // 检查Places脚本是否已加载，未加载则动态引入
    if (window.google?.maps?.places) {
      initPlacesAutocomplete();
    } else {
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places`;
      script.async = true;
      script.onload = initPlacesAutocomplete;
      document.body.appendChild(script);
    }

    // 组件卸载时清理事件监听，避免内存泄漏
    return () => {
      if (autocompleteInstance) {
        window.google.maps.event.clearInstanceListeners(autocompleteInstance);
      }
    };
  }, []);

  return (
    <div className="set-location-container">
      <label>设置位置：</label>
      <input 
        ref={locationInputRef} 
        type="text" 
        placeholder="输入地址或地点"
      />
    </div>
  );
};

export default SetLocation;

这个方案的优势：

• 只在需要用到Places功能的组件中加载初始化，性能更优
• 支持用户直接访问/set-location路由（此时脚本会动态加载，不会因为脚本未加载而失效）
• 组件卸载时清理资源，避免内存泄漏

2. 全局维护Places加载状态，路由切换时重新初始化 #

如果多个组件都需要用到Places功能，可以在App.js中维护一个全局状态标记Places是否加载完成，然后在路由切换时，针对当前页面的DOM元素重新初始化控件。

比如在App.js中：

import { useState, useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import SetLocation from './SetLocation';

function App() {
  const [placesLoaded, setPlacesLoaded] = useState(false);

  useEffect(() => {
    if (window.google?.maps?.places) {
      setPlacesLoaded(true);
      return;
    }

    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places`;
    script.async = true;
    script.onload = () => setPlacesLoaded(true);
    document.body.appendChild(script);
  }, []);

  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home placesLoaded={placesLoaded} />} />
        <Route path="/set-location" element={<SetLocation placesLoaded={placesLoaded} />} />
      </Routes>
    </div>
  );
}

export default App;

之后在SetLocation.js中，根据placesLoaded状态触发控件初始化即可。

快速排查要点 #

• 打开浏览器控制台，切换到/set-location页面后，检查window.google.maps.places是否存在：如果不存在，说明脚本没加载（直接访问路由时脚本可能还没加载完成，动态加载脚本就能解决）
• 检查你的初始初始化代码是不是只绑定了首页的DOM元素，/set-location页面的元素不在初始DOM中，导致没有被绑定控件

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