@react-google-maps/api点击Marker出现两个提示框问题求助

常见原因及对应解决方案 #

1. 误设Marker的title属性 #

Marker组件的title属性会触发Google Maps原生的悬浮提示框，如果你同时使用了自定义的InfoWindow，就会出现两个提示框（一个原生默认/空，一个自定义内容）。

解决方法：
直接移除Marker上的title属性，确保只有自定义InfoWindow在点击时触发。

示例代码：

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

const MapComponent = () => {
  const [selectedMarker, setSelectedMarker] = useState<{ lat: number; lng: number } | null>(null);

  const handleMarkerClick = (position: { lat: number; lng: number }) => {
    setSelectedMarker(position);
  };

  return (
    <GoogleMap
      mapContainerStyle={{ width: '100%', height: '400px' }}
      center={{ lat: 40.7128, lng: -74.0060 }}
      zoom={10}
    >
      <Marker
        position={{ lat: 40.7128, lng: -74.0060 }}
        // 移除title属性，避免原生提示框干扰
        onClick={() => handleMarkerClick({ lat: 40.7128, lng: -74.0060 })}
      />
      {selectedMarker && (
        <InfoWindow
          position={selectedMarker}
          onCloseClick={() => setSelectedMarker(null)}
        >
          <div>自定义提示内容</div>
        </InfoWindow>
      )}
    </GoogleMap>
  );
};

export default MapComponent;

2. 重复渲染InfoWindow组件 #

如果在循环渲染Marker时，没有正确管理InfoWindow的显示状态，可能导致每个Marker都对应一个InfoWindow实例，点击时多个同时弹出。

解决方法：
用唯一标识（比如Marker的id）管理选中状态，只渲染当前选中Marker对应的InfoWindow。

示例代码：

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

interface MarkerData {
  id: string;
  lat: number;
  lng: number;
  content: string;
}

const MapComponent = () => {
  const [selectedMarkerId, setSelectedMarkerId] = useState<string | null>(null);
  const markers: MarkerData[] = [
    { id: '1', lat: 40.7128, lng: -74.0060, content: '纽约' },
    { id: '2', lat: 34.0522, lng: -118.2437, content: '洛杉矶' },
  ];

  return (
    <GoogleMap
      mapContainerStyle={{ width: '100%', height: '400px' }}
      center={{ lat: 37.0902, lng: -95.7129 }}
      zoom={4}
    >
      {markers.map(marker => (
        <Marker
          key={marker.id}
          position={{ lat: marker.lat, lng: marker.lng }}
          onClick={() => setSelectedMarkerId(marker.id)}
        />
      ))}
      {markers.map(marker => (
        selectedMarkerId === marker.id && (
          <InfoWindow
            key={marker.id}
            position={{ lat: marker.lat, lng: marker.lng }}
            onCloseClick={() => setSelectedMarkerId(null)}
          >
            <div>{marker.content}</div>
          </InfoWindow>
        )
      ))}
    </GoogleMap>
  );
};

export default MapComponent;

3. 事件绑定重复触发 #

如果同时给Marker绑定了onClick和onMouseOver等多个事件来打开InfoWindow，或者事件处理逻辑里重复调用了显示方法，会导致多次弹出提示框。

解决方法：
检查事件绑定，确保只有onClick触发InfoWindow显示，且逻辑只执行一次。比如避免同时用onMouseOver触发相同的显示操作，除非是刻意的交互设计。

额外排查点 #

• 检查Google Maps全局配置是否开启了默认提示框功能，部分第三方配置可能自动添加原生提示。
• 确认@react-google-maps/api 2.19.2版本是否存在已知bug，但上述方案已覆盖绝大多数场景。

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