使用传单反应时,如何调用fitBounds()? [英] How do you call fitBounds() when using leaflet-react?
问题描述
我不知道如何在Leaflet地图上调用fitBounds().
I cannot figure out how to call fitBounds() on the Leaflet map.
If I was just using vanilla leaflet, this solution would work perfectly: Zoom to fit all markers in Mapbox or Leaflet
不幸的是,我正在使用react-leaflet.
Unfortunately, I am using react-leaflet.
如果我仅使用传单,这就是解决方案.
Here is the solution if I was just using leaflet by itself.
var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());
我认为此代码(我的代码)this.mapRef.current.leafletElement
等同于var leafletMap = new L.featureGroup([marker1, marker2, marker3]); leafletMap.getBounds();
,但是map.fitBounds();
等同于react-leaflet?
I think this code (my code) this.mapRef.current.leafletElement
is equivalent to var leafletMap = new L.featureGroup([marker1, marker2, marker3]); leafletMap.getBounds();
, but what is map.fitBounds();
equivalent to in react-leaflet?
基本上,我试图在地图上显示多个标记,并相应地调整视图(放大,缩小,飞向等).
Basically, I am trying to display multiple markers on the map and have the view adjust accordingly (zoom in, zoom out, fly to, etc.).
这是我的代码.
import React, { createRef, Component } from 'react'
import { Map, TileLayer, Marker, Popup, FeatureGroup } from 'react-leaflet'
export default class MasterLeafletMap extends Component {
constructor(props) {
super(props);
this.markers = this.markers.bind(this);
this.handleClick = this.handleClick.bind(this);
this.mapRef = createRef()
}
handleClick() {
const leafletMap = this.mapRef.current.leafletElement;
this.mapRef.current.fitBounds(leafletMap.getBounds()); // Doesn't work
leafletMap.fitBounds(leafletMap.getBounds()); // Doesn't work (just trying to get the bounds of the markers that are there and adjust the view)
this.mapRef.current.leafletElement.flyToBounds(leafletMap.getBounds()); // Doesn't work
}
markers() {
if (this.props.search.items instanceof Array) {
return this.props.search.items.map(function(object, i) {
const position = [object._geoloc.lat, object._geoloc.lng];
return <Marker position={position}>
<Popup>
<span>
<h4>{object.title}</h4>
{object.address}, <br /> {object.city}, {object.state}, {object.zip} <br /> {object._geoloc.lat}, {object._geoloc.lng}
</span>
</Popup>
</Marker>
})
}
}
render() {
const hasLoaded = this.props.search.items instanceof Array;
if (!hasLoaded) {
return null;
}
const position = [this.props.search.items[0]._geoloc.lat, this.props.search.items[0]._geoloc.lng];
return (
<div className="leaflet-map-container">
<div onClick={this.handleClick}>Hello</div>
<Map center={position} zoom={13} ref={this.mapRef}>
<TileLayer
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<FeatureGroup>
{this.markers()}
</FeatureGroup>
</Map>
</div>
)
}
}
谢谢.
推荐答案
以下是通过 react-leaflet
Here is an example how to accomplish it via react-leaflet
handleClick() {
const map = this.mapRef.current.leafletElement; //get native Map instance
const group = this.groupRef.current.leafletElement; //get native featureGroup instance
map.fitBounds(group.getBounds());
}
其中
<div>
<button onClick={this.handleClick}>Zoom</button>
<Map
center={this.props.center}
zoom={this.props.zoom}
ref={this.mapRef}
>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<FeatureGroup ref={this.groupRef}>
{this.props.locations.map(location => (
<Marker
key={location.name}
position={{ lat: location.lat, lng: location.lng }}
>
<Popup>
<span>
<h4>{location.name}</h4>
</span>
</Popup>
</Marker>
))}
</FeatureGroup>
</Map>
</div>
对应
var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());
这篇关于使用传单反应时,如何调用fitBounds()?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!