Google Maps API：解决街景视图点击标记不显示信息窗口问题

嘿，我之前也碰到过一模一样的问题！核心原因是常规地图（Map）和街景视图（StreetViewPanorama）是两个独立的渲染实例，街景视图会覆盖在常规地图之上，导致原来绑定在地图标记上的点击事件被街景层拦截，无法触发。下面给你几个亲测有效的替代方案：

方案一：使用街景专属标记绑定事件 #

直接为街景视图创建独立的标记，并给它绑定信息窗口的点击事件，和常规地图的标记分开维护：

// 1. 初始化街景实例
const panorama = new google.maps.StreetViewPanorama(
  document.getElementById('street-view'),
  {
    position: new google.maps.LatLng(37.7749, -122.4194), // 替换成你的标记位置
    pov: { heading: 34, pitch: 10 }
  }
);

// 2. 创建街景专属标记
const streetViewMarker = new google.maps.Marker({
  position: new google.maps.LatLng(37.7749, -122.4194),
  map: null, // 不在常规地图显示
  panorama: panorama, // 绑定到街景实例
  title: '我的街景标记'
});

// 3. 绑定信息窗口点击事件
const infoWindow = new google.maps.InfoWindow({
  content: '<div>这是街景里的信息窗口内容</div>'
});

streetViewMarker.addListener('click', () => {
  infoWindow.open(panorama, streetViewMarker); // 注意这里传入街景实例而非地图
});

这个方案逻辑清晰，适合标记数量不多的场景，用户在街景里看到的标记和常规地图的标记体验一致。

方案二：监听街景点击事件，判断点击位置 #

如果不想维护两个标记，可以监听街景的点击事件，通过计算点击位置与标记位置的距离，手动触发信息窗口：

// 假设你已有常规地图标记marker和信息窗口infoWindow
const panorama = map.getStreetView();

// 监听街景点击事件
panorama.addListener('click', (event) => {
  // 计算点击位置与标记的距离（单位：米）
  const distance = google.maps.geometry.spherical.computeDistanceBetween(
    event.latLng,
    marker.getPosition()
  );

  // 当距离小于5米时，判定为点击到标记
  if (distance < 5) {
    infoWindow.setPosition(marker.getPosition());
    infoWindow.open(panorama); // 在街景中打开信息窗口
  }
});

⚠️ 注意：这个方案需要加载Google Maps的几何库，在引入Maps API时要加上&libraries=geometry参数。

方案三：同步常规标记与街景标记的状态 #

如果希望标记在常规地图和街景中无缝切换，可以监听地图的街景切换事件，动态切换标记的显示载体：

// 初始化常规标记和街景标记
const marker = new google.maps.Marker({
  position: new google.maps.LatLng(37.7749, -122.4194),
  map: map,
  title: '我的标记'
});

const streetViewMarker = new google.maps.Marker({
  position: marker.getPosition(),
  map: null,
  panorama: null,
  title: marker.getTitle()
});

// 监听地图的街景切换事件
map.addListener('streetview_changed', () => {
  const currentPanorama = map.getStreetView();
  if (currentPanorama.getVisible()) {
    // 进入街景：隐藏常规标记，显示街景标记
    marker.setMap(null);
    streetViewMarker.setPanorama(currentPanorama);
  } else {
    // 返回常规地图：显示常规标记，隐藏街景标记
    marker.setMap(map);
    streetViewMarker.setPanorama(null);
  }
});

// 给两个标记绑定相同的信息窗口点击事件
const infoWindow = new google.maps.InfoWindow({ content: '统一的信息内容' });
marker.addListener('click', () => infoWindow.open(map, marker));
streetViewMarker.addListener('click', () => infoWindow.open(panorama, streetViewMarker));

这个方案能让标记在两种视图下保持一致的交互体验，适合对连贯性要求高的场景。

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