React Google Maps组件视口边界更新报错：google未定义求助

我看到你遇到的问题核心在于Google Maps脚本加载时机和组件生命周期不匹配，再加上地图实例引用管理的疏漏，咱们一步步来解决：

问题根源 #

withScriptjs是异步加载Google Maps API的，而你在componentWillMount里直接调用new google.maps.LatLngBounds()时，脚本还没加载完成，自然会出现google is not defined；同时componentWillMount执行时地图组件还未挂载，refs.map也不存在，后续的fitBounds调用也必然失败。

解决方案步骤 #

1. 修正Google Maps API URL格式 #

你当前的googleMapURL存在语法错误，key=APIKEY=3.exp应该改成key=你的实际API密钥&v=3.exp，否则脚本加载会直接失败：

googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=YOUR_ACTUAL_API_KEY&v=3.exp&libraries=geometry,drawing,places',

2. 移到正确的时机处理边界逻辑 #

放弃在componentWillMount里处理地图边界，改用地图挂载完成的回调或者componentDidUpdate（确保标记数据更新时触发）——这两个时机下Google Maps已经加载完成，地图实例也已就绪。

3. 正确管理地图实例引用 #

通过onMapMounted回调把地图实例保存到组件实例中，而非在lifecycle外部定义游离的refs。

修改后的代码示例 #

下面是调整后的核心代码片段，重点修复了生命周期逻辑和边界处理：

const MapSearchBox = compose(
  withProps(props => ({
    googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=YOUR_ACTUAL_API_KEY&v=3.exp&libraries=geometry,drawing,places',
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `450px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  })),
  withScriptjs,
  withGoogleMap,
  defaultProps({
    externalMarkers: [],
  }),
  lifecycle({
    componentDidMount() {
      // 初始化状态，将refs绑定到组件实例
      this.mapRef = null;
      const { lat, lng } = this.props.coords || (this.props.place && this.props.place.coords) || {};
      const initialMarker = lat !== undefined && lng !== undefined ? [buildMarkerObj({ lat, lng })] : [];

      this.setState({
        center: {
          lat: lat || 41.9,
          lng: lng || -87.624,
        },
        markers: initialMarker,
        injectedMarkers: this.props.markers || [],
      });
    },
    componentDidUpdate(prevProps) {
      // 当标记数据变化时更新视口边界
      if (prevProps.markers !== this.props.markers || prevProps.externalMarkers !== this.props.externalMarkers) {
        this.updateMapBounds();
      }
    },
    updateMapBounds() {
      // 确保Google脚本已加载且地图实例存在
      if (!window.google || !this.mapRef) return;

      const bounds = new window.google.maps.LatLngBounds();
      // 遍历内部标记扩展边界
      this.props.markers.forEach(marker => {
        bounds.extend(new window.google.maps.LatLng(marker.coords.lat, marker.coords.lng));
      });
      // 遍历外部标记扩展边界
      this.props.externalMarkers.forEach(marker => {
        bounds.extend(new window.google.maps.LatLng(marker.coords.lat, marker.coords.lng));
      });
      // 避免无标记时调用fitBounds报错
      if (bounds.isEmpty()) return;
      this.mapRef.fitBounds(bounds);
      this.mapRef.panToBounds(bounds);
    }
  }),
)
((props) => <GoogleMap
    ref={ref => { props.onMapMounted(ref); }}
    defaultZoom={15}
    center={props.center}
    onLoad={() => {
      // 地图首次加载完成后初始化边界
      props.updateMapBounds();
    }}
  >
    <SearchBox
      ref={ref => { props.onSearchBoxMounted(ref); }}
      bounds={props.bounds}
      // 避免脚本未加载时访问google对象报错
      controlPosition={window.google ? window.google.maps.ControlPosition.TOP_LEFT : null}
      onPlacesChanged={props.onPlacesChanged}
    >
      <input
        type="text"
        placeholder="Enter your area"
        style={{
          boxSizing: 'border-box',
          border: '1px solid white',
          width: '240px',
          height: '32px',
          marginTop: '12px',
          padding: '0 12px',
          borderRadius: '3px',
          boxShadow: '0 2px 6px rgba(0, 0, 0, 0.3)',
          fontSize: '14px',
          outline: 'none',
          textOverflow: 'ellipses',
          backgroundColor: 'white',
        }}
      />
    </SearchBox>
    {props.markers.map((marker, index) => <Marker key={`map-marker-${index}`} position={marker.position} /> )}
    {props.externalMarkers.map((marker, index) => <Marker key={`external-marker-${index}`} position={marker.coords} /> )}
  </GoogleMap>
)

同时调整MapComponent，确保传递必要的回调和props：

class MapComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { isMarkerShown: false };
    this.mapInstance = null;
  }

  componentDidMount() {
    this.delayedShowMarker();
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.setState({ isMarkerShown: true });
    }, 3000);
  }

  handleMarkerClick = () => {
    this.setState({ isMarkerShown: false });
    this.delayedShowMarker();
  }

  saveMapInstance = (ref) => {
    this.mapInstance = ref;
  }

  triggerBoundsUpdate = () => {
    if (this.mapInstance && this.mapInstance.updateMapBounds) {
      this.mapInstance.updateMapBounds();
    }
  }

  render() {
    return (
      <MapSearchBox 
        isMarkerShown={this.state.isMarkerShown} 
        onMarkerClick={this.handleMarkerClick}
        markers={this.props.markers}
        externalMarkers={this.props.externalMarkers}
        onMapMounted={this.saveMapInstance}
        updateMapBounds={this.triggerBoundsUpdate}
      />
    );
  }
}

额外注意事项 #

• 不要同时在index.html和withScriptjs中加载Google Maps脚本，会导致冲突，保留withScriptjs的加载方式即可。
• 使用window.google代替直接写google，确保在脚本加载完成后能正确访问对象（/* global google */只是让ESLint不报错，无法解决对象未定义的实际问题）。
• 处理边界时一定要判断bounds.isEmpty()，避免没有标记时调用fitBounds引发错误。

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