检查标记在 ViewPort 上是否可见 google-maps-react

Question

我目前在 zillow.com 这样的网站上工作，我必须在地图右侧显示与地图上可见标记相对应的数据，并且无论何时用户拖动地图我必须检查地图上的新标记并显示在右侧面板上。

const { isLoaded, loadError } = useJsApiLoader({
      googleMapsApiKey: "APIKEY",
      libraries: libraries
  });
  const mapRef = useRef();
  const onMapLoad = useCallback((map) => {
      mapRef.current = map;
  }, [])
return isLoaded && (
      <>
  <GoogleMap mapContainerStyle={mapContainerStyle}
     center={center}
     zoom={9.1}
     options={options}
     onLoad={onMapLoad}
     onDragEnd={() => console.log("DRAGGED")}
     >
    sellerData.map((element, index) => {
                          return (
                              <>
                                  <Marker
                                      key={index}
                                      position={
                                          {
                                              lat: element.Marker.lat, lng: element.Marker.lng
                                          }}
                                      icon={{
                                          url: icon,
                                          scaledSize: new window.google.maps.Size(40, 40)
                                      }}
                                  />
</GoogleMap>
<>
)```

Answer 1

我受此代码限制：

import React from "react";
import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";

const containerStyle = {
    width: "400px",
    height: "400px"
};

const center = {
    lat: 45.745,
    lng: 5.65
};

function Map() {
    const { isLoaded } = useJsApiLoader({
        id: "google-map-script",
        googleMapsApiKey: "AIzaSyC2-n39eQnutXECIDc-9tlNMNFmxzshDtE"
    });

    const [map, setMap] = React.useState(null);

    const onLoad = React.useCallback(function callback(map) {
        const bounds = new window.google.maps.LatLngBounds();
        console.log(bounds);
        // map.fitBounds(bounds);
        setMap(map);
    }, []);

    const onUnmount = React.useCallback(function callback(map) {
        setMap(null);
    }, []);

    return isLoaded ? (
        <GoogleMap
            mapContainerStyle={containerStyle}
            center={center}
            zoom={10}
            onLoad={onLoad}
            onUnmount={onUnmount}
            onDragEnd={() => console.log(map.getBounds())}
        >
            {/* Child components, such as markers, info windows, etc. */}
            <></>
        </GoogleMap>
    ) : (
        <></>
    );
}

export default React.memo(Map);

Answer 2

Map.getBounds().getNorthEast() 将为您提供最东端的经纬度和经纬度，而 getBounds().getSouthWest() 将为您提供左下角的纬度和经度。试试这个：

const OnDragEnd= ()=>{
let ne = this.map.getBounds().getNorthEast();
let sw = this.map.getBounds().getSouthWest();
 console.log(ne.lat() + ";" + ne.lng());
 console.log(sw.lat() + ";" + sw.lng());
}

稍后谢谢我

检查标记在 ViewPort 上是否可见 google-maps-react

Check if marker is visible on ViewPort google-maps-react

reactjs

react-google-maps