How to call fitBounds and getBounds in react-leaflet?(如何在 react-leaflet 中调用 fitBounds 和 getBounds?)
问题描述
我不知道如何在 Leaflet 地图上调用 fitBounds().
基本上,我试图在地图上显示多个标记并相应地调整视图(放大、缩小、飞到等).我还看到了一些示例
I cannot figure out how to call fitBounds() on the Leaflet map.
Basically, I am trying to display multiple markers on the map and have the view adjust accordingly (zoom in, zoom out, fly to, etc.). i also saw some example How do you call fitBounds() when using leaflet-react? and i tried to implement but it did not work. Here is my code that i tried.
import React, { createRef, Component } from "react";
import {
Map,
TileLayer,
Marker,
Popup
} from "react-leaflet";
import L from "leaflet";
import Header from "../Layout/Header";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import "leaflet/dist/leaflet.css";
export class Mapp extends Component {
constructor(props) {
super(props);
this.state = {
map: [],
open: false,
bounds: null,
center: [35.000074, 104.999927]
};
this.mapRef = createRef();
this.groupRef = createRef();
}
toggleHiddden1() {
this.setState({
open: false
});
async componentDidMount() {
try {
await fetch(`https://coronaviva.herokuapp.com/api/1/infected/data/`, {
method: "GET",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
Authorization: "Bearer F9bQK456iUpJVZJLTZsMEKhhENqnGJ"
}
})
.then(map => map.json())
.then(map => {
this.setState({
map
});
});
} catch (err) {
console.log(err);
}
let mapInst = this.refs.map.leafletElement.fitBounds;
console.log(mapInst); // i tried this but this not working.
}
// centerUpdated(center) {
// this.center = center;
// }
// boundsUpdated(bounds) {
// this.bounds = bounds;
// }
render() {
const { map } = this.state;
const pointerIcon = new L.Icon({
iconUrl:
"https://icons.iconarchive.com/icons/paomedia/small-n-flat/512/map-marker-icon.png",
iconAnchor: [25, 40],
iconSize: [50, 50]
});
return (
<div>
<Header
state={this.state}
load={this.onChange}
submit={this.handleSubmit}
/>
<Map
center={[51.9194, 19.1451]}
style={{ height: "100vh", width: "auto" }}
zoom={6}
ref="map"
bounceAtZoomLimits={true}
maxBoundsViscosity={0.95}
maxBounds={[
[-180, -90],
[180, 90]
]}
className="map_map margin-zero map-padding"
>
{map.map(c => (
<Marker
position={[c.latitude, c.longitude]}
icon={pointerIcon}
onclick={this.toggleHiddden.bind(this)}
>
<Popup autoPan={false}>
<Card className="carrr">
{c.location === "Israel" ? (
<img
className="image"
src="https://thehill.com/sites/default/files/styles/article_full/public/telaviv_skyline_09202018.jpg?itok=pxhk1Rtl"
alt="Contemplative Reptile"
/>
) : (
<img
className="image"
src="https://www.dwf.law/-/media/DWF/Images/Locations-Assets/Warsaw/Warsaw-700-x-388.ashx"
alt="Contemplative Reptile"
/>
)}
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{c.location && <span> Place : {c.location} </span>}
</Typography>
<h6>Address : {c.address}</h6>
<p className="text-dark" style={{ marginTop: "-5px" }}>
{c.info && (
<span>
<strong> Info</strong>: {c.info}{" "}
</span>
)}
</p>
<p
color="textSecondary text-secondary"
component="p"
className="lodl"
>
PlaceType : {c.place_type}
<br></br>
{c.start_hour && (
<span>
Start Hour : {c.start_hour}{" "}
{c.start_hour > "12" ? "PM" : "AM"}
</span>
)}
<br></br>
{c.end_hour && (
<span>
End Hour : {c.end_hour}{" "}
{c.end_hour > "12" ? "PM" : "AM"}
</span>
)}
</p>
</CardContent>
</Card>
</Popup>
</Marker>
))}
<TileLayer
noWrap={true}
url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
subdomains="1234"
attribution='© <a href="http://osm.org/copyright">OpenStreepMap</a> '
/>
</Map>
</div>
);
}
}
export default Mapp;
You have several errors in your code:
You do not close
toggleHiddden1
with an}
. Moreover you call it astoggleHiddden
in the component. You should use one name for the method.the map instance is derived from
let mapInst = this.mapRef.current.leafletElement;
not from
let mapInst = this.refs.map.leafletElement;
Then you can call
fitBounds()
The ref in the react-leaflet Map wrpapper should be
ref={this.mapRef}
and notref="map"
Place a key when you looping over the markers.
Just used an openstreet map tiles url to be able to demonstrate the demo.
Edit
To use both fitBounds and getBounds at the same time for a marker you need to wrap your markers loop with a FeatureGroup
and give it a ref, then do
let mapInst = this.mapRef.current.leafletElement;
const group = this.groupRef.current.leafletElement; //get native featureGroup instance
mapInst.fitBounds(group.getBounds());
inside your componentDidMount
and then you will get the desired result.
Demo
这篇关于如何在 react-leaflet 中调用 fitBounds 和 getBounds?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何在 react-leaflet 中调用 fitBounds 和 getBounds?
基础教程推荐
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01