如何在React-Google-Map中获取地图边界内的标记点？

嘿，我来帮你搞定这个问题！在React-Google-Maps里获取边界内的标记点，完全可以不用直接写new google.map...的原生写法，先给你说纯React-Google-Maps的实现方式，要是需要更精确的判断再用原生API辅助~

步骤1：保存地图边界与标记点数据 #

首先用React的useState来存当前地图的边界，以及所有的标记点数据：

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

const MapComponent = () => {
  // 存储当前地图边界
  const [mapBounds, setMapBounds] = useState(null);
  // 示例标记点数据，每个点包含id、lat和lng
  const [markers, setMarkers] = useState([
    { id: 1, lat: 53, lng: -7.77 },
    { id: 2, lat: 53.1, lng: -7.8 },
    { id: 3, lat: 52.9, lng: -7.7 },
    // 可以添加更多标记点
  ]);

步骤2：在地图 onChange 中更新边界 #

利用GoogleMap组件的onChange回调，把获取到的边界存到state里：

return (
    <GoogleMap
      mapContainerStyle={{ width: '100%', height: '800px' }}
      center={{ lat: 53, lng: -7.77 }}
      zoom={10}
      onChange={(mapProps) => {
        // 从props里拿到bounds并更新state
        setMapBounds(mapProps.bounds);
      }}
    >
      {/* 这里后续渲染筛选后的标记点 */}
    </GoogleMap>
  );
};

步骤3：纯React方式筛选边界内的标记点 #

你已经拿到了bounds的四个角坐标（nw、se等），可以直接通过坐标范围来判断标记点是否在边界内——西北点（nw）的纬度最高、经度最小，东南点（se）的纬度最低、经度最大，所以判断逻辑很清晰：

// 筛选可见标记点的函数
  const getVisibleMarkers = () => {
    if (!mapBounds) return markers; // 边界还没加载时返回所有标记点
    const { nw, se } = mapBounds;
    return markers.filter(marker => {
      return (
        // 纬度在se.lat（最小）到nw.lat（最大）之间
        marker.lat >= se.lat && marker.lat <= nw.lat &&
        // 经度在nw.lng（最小）到se.lng（最大）之间
        marker.lng >= nw.lng && marker.lng <= se.lng
      );
    });
  };

然后在GoogleMap组件内部渲染筛选后的标记点：

{getVisibleMarkers().map(marker => (
  <Marker
    key={marker.id}
    position={{ lat: marker.lat, lng: marker.lng }}
  />
))}

进阶：用Google原生API做精确判断（如果需要） #

如果你的地图覆盖高纬度区域（比如极地附近），纯坐标范围判断可能因为地球曲率出现误差，这时候可以借助Google Maps的原生LatLngBounds API，但依然不需要直接创建地图实例：

const mapRef = useRef(null); // 先定义地图的ref

// 修改getVisibleMarkers函数
const getVisibleMarkers = () => {
  if (!mapBounds || !mapRef.current) return markers;
  // 用拿到的bounds创建原生LatLngBounds对象
  const nativeBounds = new window.google.maps.LatLngBounds(
    new window.google.maps.LatLng(mapBounds.se.lat, mapBounds.se.lng),
    new window.google.maps.LatLng(mapBounds.nw.lat, mapBounds.nw.lng)
  );
  return markers.filter(marker => {
    const markerLatLng = new window.google.maps.LatLng(marker.lat, marker.lng);
    return nativeBounds.contains(markerLatLng); // 用原生API判断是否在边界内
  });
};

// 给GoogleMap组件加上ref
<GoogleMap
  ref={mapRef}
  // 其他props不变
/>

这种方式既满足了你尽量用React-Google-Maps的需求，又能在需要时借助原生API提高准确性~

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