如何在react-google-maps-api街景模式中显示InfoBox？

当前实现中，嵌套在Marker内的InfoBox仅在点击Marker时显示，但切换到StreetView（街景）模式后无法显示。以下是解决方法：

核心原因 #

Marker组件绑定在2D地图视图上，街景视图（StreetViewPanorama）属于独立视图层，无法识别Marker的子组件，因此需要单独处理InfoBox在街景模式下的渲染逻辑。

解决方案步骤 #

1. 拆分Marker与InfoBox的嵌套结构：将InfoBox从Marker中抽离，作为独立组件挂载到地图上。
2. 监听视图切换与街景位置变化：通过地图的onStreetViewChanged相关事件判断是否进入街景模式，同时监听街景的位置更新。
3. 位置匹配控制显示：计算街景位置与Marker位置的距离，当距离小于设定阈值时显示InfoBox。

修改后的代码示例 #

import { useState } from 'react';
import { GoogleMap, InfoBox, Marker, useJsApiLoader } from '@react-google-maps/api';

const MapComponent = ({ data }) => {
  const [isStreetViewActive, setIsStreetViewActive] = useState(false);
  const [streetViewPosition, setStreetViewPosition] = useState(null);
  const [activeMarkerIndex, setActiveMarkerIndex] = useState(null);

  // 初始化时监听街景状态与位置变化
  const handleMapLoad = (map) => {
    const streetView = map.getStreetView();
    
    // 监听街景可见性切换
    streetView.addListener('visible_changed', () => {
      setIsStreetViewActive(streetView.getVisible());
    });
    
    // 监听街景位置移动
    streetView.addListener('position_changed', () => {
      setStreetViewPosition(streetView.getPosition());
    });
  };

  // 判断街景位置是否与Marker位置足够接近（可调整距离阈值）
  const shouldShowInfoBox = (markerPos) => {
    if (!isStreetViewActive || !streetViewPosition) return false;
    
    // 计算两点间直线距离（需依赖geometry库）
    const distance = google.maps.geometry.spherical.computeDistanceBetween(
      new google.maps.LatLng(markerPos.lat, markerPos.lng),
      streetViewPosition
    );
    
    return distance < 50; // 50米范围内显示InfoBox
  };

  return (
    <GoogleMap
      onLoad={handleMapLoad}
      center={{ lat: 37.7749, lng: -122.4194 }}
      zoom={12}
    >
      {data.map(({ source }, index) => (
        <>
          <Marker
            key={`marker-${index}`}
            position={source}
            onClick={() => setActiveMarkerIndex(index === activeMarkerIndex ? null : index)}
          />
          <InfoBox
            key={`infobox-${index}`}
            position={source}
            options={{
              enableEventPropagation: true,
              boxStyle: {
                border: '1px solid #000',
                borderRadius: '5px',
                backgroundColor: '#fff',
                padding: '10px',
                fontSize: '14px'
              },
              // 双模式显示控制：普通地图点击Marker显示，街景位置匹配显示
              visible: isStreetViewActive 
                ? shouldShowInfoBox(source) 
                : index === activeMarkerIndex
            }}
          >
            <div>
              <p>Some text here</p>
            </div>
          </InfoBox>
        </>
      ))}
    </GoogleMap>
  );
};

// 加载API时需引入geometry库
const App = () => {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'YOUR_API_KEY',
    libraries: ['geometry'] // 必须添加，用于计算位置距离
  });

  return isLoaded ? <MapComponent data={YOUR_DATA} /> : <div>Loading...</div>;
};

export default App;

关键注意事项 #

• 必须在API加载参数中添加libraries: ['geometry']，否则无法使用computeDistanceBetween计算位置距离。
• 距离阈值（示例中50米）可根据业务需求调整，确保街景靠近Marker时才触发显示。
• 普通地图模式下的点击显示逻辑与街景模式的显示逻辑独立，互不干扰。

内容的提问来源于stack exchange，提问作者Amir-Mousavi