Javascript 如何获取react传单地图的边界并检查地图内的标记？

我的代码在这里：

import React, { useState, useEffect, useRef } from 'react';
import restaurantsInfo from "./RestaurantsList.json";
import "./App.css";
import { MapContainer, Marker, Popup, TileLayer, useMapEvents } from "react-leaflet";
import { Icon, latLng } from "leaflet";
import Restaurants from "./Restaurants.js";
import LocationMarker from "./LocationMarker.js";
import L from 'leaflet';

export default function App() {
    function LocationMarker() {
        const [position, setPosition] = useState(null);
        const [bbox, setBbox] = useState([]);
    
        const map = useMap();
    
        useEffect(() => {
          map.locate().on("locationfound", function (e) {
            setPosition(e.latlng);
            map.flyTo(e.latlng, map.getZoom());
            const radius = e.accuracy;
            const circle = L.circle(e.latlng, radius);
            circle.addTo(map);
            setBbox(e.bounds.toBBoxString().split(","));
          });
        }, [map]);
    
        return position === null ? null : (
          <Marker position={position} icon={icon}>
            <Popup>
              You are here. <br />
              Map bbox: <br />
              <b>Southwest lng</b>: {bbox[0]} <br />
              <b>Southwest lat</b>: {bbox[1]} <br />
              <b>Northeast lng</b>: {bbox[2]} <br />
              <b>Northeast lat</b>: {bbox[3]}
            </Popup>
          </Marker>
        );
      }
  return (
    <div class="container">
    <div style={{height: '400px', width: '500px'}} class="map">
    <MapContainer 
    center={[49.1951, 16.6068]} 
    zoom={defaultZoom} 
    scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
<MapContainer/>

或者这个：

if ((bbox[1] < marker.lat< bbox[3])&& (bbox[2] <marker.long <bbox[4]))

---

如果（（bbox[1]
在父组件（
App
）上声明
bbox
变量并存储该实例。您需要它以便以后能够使用contains方法。您可以将
bbox
和
setbox
作为LocationMarker组件上的道具传递。这样，您将拥有两个组件之间的通信

同时将
LocationMarker
comp移动到应用程序外部

以下是
LcoationMarker
组件：

function LocationMarker({ bbox, setBbox }) {
  const [position, setPosition] = useState(null);

  const map = useMap();

  useEffect(() => {
    map.locate().on("locationfound", function (e) {
      setPosition(e.latlng);
      map.flyTo(e.latlng, map.getZoom());
      const radius = e.accuracy;
      const circle = L.circle(e.latlng, radius);
      circle.addTo(map);
      setBbox(e.bounds);
    });
  }, [map,setBbox]);

  const boundingBox = bbox ? bbox.toBBoxString().split(",") : null;

  if (!position || !bbox) return null;
  return (
    <Marker position={position} icon={icon}>
      <Popup>
        You are here. <br />
        Map bbox: <br />
        <b>Southwest lng</b>: {boundingBox[0]} <br />
        <b>Southwest lat</b>: {boundingBox[1]} <br />
        <b>Northeast lng</b>: {boundingBox[2]} <br />
        <b>Northeast lat</b>: {boundingBox[3]}
      </Popup>
    </Marker>
  );
}

函数位置标记（{bbox，setbox}）{
const[position，setPosition]=useState（null）；
const map=useMap（）；
useffect（（）=>{
函数（e）的“locationfound”上的map.locate（）{
设置位置（如板条）；
map.flyTo（例如，latlng，map.getZoom（））；
常数半径=e.精度；
常数圆=L圆（e板条，半径）；
圆圈。添加到（地图）；
立根盒（e.bounds）；
});
}，[地图，方框]；
const boundingBox=bbox？bbox.toBBoxString（）.split（“，”）：null；
如果（！position | |！bbox）返回null；
返回(
你来了。

地图bbox:

西南液化天然气：{boundingBox[0]}

西南纬度：{boundingBox[1]}

东北液化天然气：{boundingBox[2]}

东北纬度：{boundingBox[3]}
);
}

这是应用程序组件。在本例中，您可以通过按钮使用bbox isntance。请确保在使用它之前检查bbox是否已定义

function App() {
  const [bbox, setBbox] = useState(null);

  const handleClick = () => {
    if (bbox) alert(bbox.contains([49.1951, 16.6068]));
  };

  return (
    <>
      <MapContainer ...>
     ...
        <LocationMarker bbox={bbox} setBbox={setBbox} />
      </MapContainer>
      <button onClick={handleClick}>bbox contains</button>
    </>
  );
}

函数应用程序（）{
const[bbox，setbox]=useState（null）；
常量handleClick=（）=>{
if（bbox）警报（bbox.contains（[49.1951,16.6068]））；
};
返回(
...
bbox包含
);
}

这是一个包含所有部分的应用程序
谢谢，它看起来很棒，但我有一个更复杂的应用程序。我需要在另一个组件中使用bbox。请看一看：或者最好创建另一个问题？我看到了你的github回购，我想你已经在
餐厅组件
上调整了我对你代码的回答。你想这样做吗在其他地方使用
bbox
变量？通过将
bbox
作为道具传递，我想第一眼就可以了。是的，如果您有基于给定答案的另一个问题，您应该创建另一个问题。检查此项。问题是
bbox
的初始值。您将其作为
[]
并且应该是
null
。现在要获得
true
标记应该在bbox中。如果您有更多问题，您应该创建一个新线程。太好了！它工作了！！！您是一个天才！非常感谢！当然，它在这里：
function App() {
  const [bbox, setBbox] = useState(null);

  const handleClick = () => {
    if (bbox) alert(bbox.contains([49.1951, 16.6068]));
  };

  return (
    <>
      <MapContainer ...>
     ...
        <LocationMarker bbox={bbox} setBbox={setBbox} />
      </MapContainer>
      <button onClick={handleClick}>bbox contains</button>
    </>
  );
}