![](/img/trans.png)
[英]How to locate react-leaflet map to user's current position and get the borders for this map?
[英]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='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MapContainer/>
我的問題是,如何使用 bbox 檢查我的某些標記是否在 map 內? 當我嘗試申請時:
if (bbox.contains(marker.getPosition())===true)
或這個:
if ((bbox[1] < marker.lat< bbox[3])&& (bbox[2] <marker.long <bbox[4]))
我遇到了錯誤:未定義 bbox
我不知道如何從 function LocationMarker() 返回 bbox。 如果有任何幫助,我將不勝感激。 謝謝你。
然后,您需要采用稍微不同的方法:
在父組件( App
)上聲明bbox
變量並存儲實例。 稍后您將需要它才能使用 contains 方法。 您可以在 LocationMarker comp bbox
和setBbox
作為道具傳遞。 這樣做,您將在兩個組件之間進行通信。
還將LocationMarker
組件移到應用程序之外。
這是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 實例。 確保在使用之前檢查 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>
</>
);
}
這是一個包含所有部分的演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.