Javascript 如何向用户定位react传单地图'；s当前位置并获取此地图的边界？

我需要将react传单地图定位到用户的当前位置，并获取此地图的边界。我试图应用以下代码，但遇到了错误：

TypeError:无法读取未定义（匿名）的属性“locate” 功能）

请帮帮我

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';

const myLocation = [49.1951, 16.6068];
const defaultZoom = 13;

export default function App() {

  const mapRef = useRef();
  useEffect(() => {
    const { current = {} } = mapRef;
    const { leafletElement: map } = current;
    map.locate({
    setView: true,
    });
    map.on('locationfound', handleOnLocationFound);
  }, []);

  function handleOnLocationFound(event) {
    const { current = {} } = mapRef;
    const { leafletElement: map } = current;
    const latlng = event.latlng;
    const radius = event.accuracy;
    const circle = L.circle(latlng, radius);
    circle.addTo(map);
  }

  return (
    <div class="container">
    <div style={{height: '400px', width: '500px'}} class="map">
    
    <MapContainer ref={mapRef} center={myLocation} 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 >

import React，{useState，useffect，useRef}来自'React'；
从“/RestaurantsList.json”导入RestaurantInfo；
导入“/App.css”；
从“react传单”导入{MapContainer、Marker、Popup、TileLayer、useMapEvents}；
从“传单”导入{Icon，latLng}；
从“/Restaurants.js”导入餐厅；
从“/LocationMarker.js”导入LocationMarker；
从“传单”进口L；
const myLocation=[49.1951,16.6068]；
常量默认缩放=13；
导出默认函数App（）{
const mapRef=useRef（）；
useffect（（）=>{
常量{current={}}=mapRef；
常量{element:map}=当前；
定位({
setView：对，
});
地图上（'locationfound'，handleOnLocationFound）；
}, []);
函数handleOnLocationFound（事件）{
常量{current={}}=mapRef；
常量{element:map}=当前；
const latlng=event.latlng；
常数半径=事件精度；
常数圆=L圆（板条，半径）；
圆圈。添加到（地图）；
}
返回(

您需要一个自定义组件来完成该任务，它将是

MapContainer

的子组件。从

locationfound

event.bounds

 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>
    );
  }

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

地图bbox:

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

西南纬度：{bbox[1]}

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

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

在这里使用它

<MapContainer
      center={[49.1951, 16.6068]}
      ...
      <LocationMarker />
 </MapContainer>

---

你可以通过
map.getBounds（）
Ohh，很好，谢谢！！！我还有一个问题。我如何使用bbox检查我的一些标记是否在地图中？当我尝试应用时：If（bbox.contains（marker.getPosition（））==true）或这个If（（bbox[1]