如何获得反应传单地图的边界并检查地图内的标记? [英] How to get borders for the react-leaflet map and check markers inside the map?

问题描述

我的代码在这里:

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/>

我的问题是，如何使用bbox检查我的某些标记是否在地图内?当我尝试申请时:

My question is, how can I use bbox to check if some of my markers is inside the map? When I try to apply:

if (bbox.contains(marker.getPosition())===true) 

或者这个:

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

我遇到了错误:未定义bbox

I faced the error: bbox is not defined

我不知道如何从LocationMarker()函数返回bbox.我将不胜感激.谢谢.

I don’t know how to return bbox from function LocationMarker(). I would be grateful for any help. Thank you.

推荐答案

您需要遵循以下略有不同的方法:

You need to follow a slight different approach then:

在父组件( App )上声明 bbox 变量并存储实例.您将需要它以后才能使用contains方法.您可以通过 bbox 和 setBbox 作为LocationMarker comp上的道具.这样，您就可以在两个组件之间进行通信.

Declare bbox variable on the parent component(App) and store the instance. You will need it to be able to use contains method later. you can pass bbox and setBbox as props on LocationMarker comp. Doing that you will have the communication between the two components.

还将 LocationMarker 组件移到应用程序外部.

Also move the LocationMarker comp outside the App.

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

这是App组件.在此示例中，您可以通过按钮使用bbox nottance.使用前请确保检查是否已定义bbox.

Here is the App component. You can use bbox isntance in this example via a button. Make sure to check that bbox is defined before using it.

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

这是

Here is a demo with all the pieces together

这篇关于如何获得反应传单地图的边界并检查地图内的标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！