如何将 react-leaflet 地图定位到用户的当前位置并获取此地图的边框？

问题描述

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

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 >

解决方法

您需要一个自定义组件来完成这项工作并且是 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>
    );
  }

在这里使用

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

Demo