react-google-maps/api中StreetViewPanorama的onCloseclick不触发求助

几个可行的修复方案 #

• 调整组件层级，避免嵌套在GoogleMap内
  你当前把StreetViewPanorama嵌套在GoogleMap组件内部，这种结构可能导致关闭事件被内部逻辑拦截。试试将它拆出来单独使用：

  <StreetViewPanorama
    options={{
      position: data.position,
      visible: true,
    }}
    onCloseclick={(e) => {
      console.log(e);
    }}
  />
  

• 手动通过原生API绑定事件
  如果上面的方法没用，直接通过onLoad回调获取全景实例，手动绑定closeclick事件，绕开组件封装的潜在问题：

  <StreetViewPanorama
    options={{
      position: data.position,
      visible: true,
    }}
    onLoad={(panorama) => {
      panorama.addListener('closeclick', (e) => {
        console.log('关闭按钮点击触发', e);
      });
    }}
  />
  

• 升级组件版本
  旧版本的@react-google-maps/api可能存在onCloseclick属性的绑定bug，直接升级到最新稳定版试试：

  npm update @react-google-maps/api
  # 使用yarn的话执行这句
  yarn upgrade @react-google-maps/api
  

• 确保visible属性受控
  如果需要动态切换全景视图的显示状态，要把visible设置为受控状态，关闭时同步更新状态，避免组件状态混乱导致事件失效：

  const [showPanorama, setShowPanorama] = useState(true);
  
  return (
    <StreetViewPanorama
      options={{
        position: data.position,
        visible: showPanorama,
      }}
      onCloseclick={() => {
        setShowPanorama(false);
        console.log('关闭触发');
      }}
    />
  );
  

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