react-google-maps/api中GoogleMap的options重复渲染问题求助

核心原因 #

你在JSX中直接内联定义options对象，每次组件渲染时都会创建一个新的对象引用。<GoogleMap>组件会检测到options props变化，触发地图重新渲染，进而重置地图类型控件的状态，导致你选择的标签几秒后消失。

解决方案 #

1. 在Class组件中缓存options为实例属性 #

将options对象在组件的constructor中初始化，确保每次渲染时引用的是同一个对象：

class YourMapComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    // 初始化地图配置，作为实例属性缓存
    this.mapOptions = {
      zoomControl: false,
      streetViewControl: false,
      fullscreenControl: false,
      mapTypeId: 'satellite',
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
    };
  }

  onMapLoad(map) {
    // 你的地图加载逻辑
  }

  onZoomChanged() {
    // 你的缩放变化逻辑
  }

  render() {
    const { center } = this.props;
    return (
      <GoogleMap
        ref={this.myRef}
        mapContainerStyle={{ width: '100%', height: '100%' }}
        center={center}
        options={this.mapOptions} // 使用缓存的实例属性
        onLoad={(map) => this.onMapLoad(map)}
        zoom={3}
        onZoomChanged={() => this.onZoomChanged()}
        onClick={() => this.props.handleMouseClickOnMap()}
      >
        {/* 你的地图子组件 */}
      </GoogleMap>
    );
  }
}

2. 额外优化：避免其他props触发不必要渲染 #

如果center也是每次渲染创建的新对象（比如直接在render里定义const center = { lat: xxx, lng: xxx }），同样会触发组件重新渲染。可以将center也缓存为实例属性，或者让组件继承React.PureComponent，通过浅比较props减少不必要的渲染。

效果验证 #

使用上述方法后，options的引用不再变化，<GoogleMap>不会因为options重复渲染，地图类型控件的状态会保持，选择的标签也不会消失，同时默认卫星图、控件居中显示的需求也能满足。

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