使用 Leaflet-react 时如何调用 fitBounds()? [英] How do you call fitBounds() when using leaflet-react?

问题描述

我不知道如何在 Leaflet 地图上调用 fitBounds().

如果我只是使用香草传单，此解决方案将完美运行:缩放以适应 Mapbox 或 Leaflet 中的所有标记

不幸的是，我正在使用 react-leaflet.

如果我只是单独使用传单，这就是解决方案.

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 中的什么?

基本上，我试图在地图上显示多个标记并相应地调整视图(放大、缩小、飞到等).

这是我的代码.

import React, { createRef, Component } from 'react'从 'react-leaflet' 导入 { Map, TileLayer, Marker, Popup, FeatureGroup }导出默认类 MasterLeafletMap 扩展组件 {构造函数(道具){超级(道具)；this.markers = this.markers.bind(this);this.handleClick = this.handleClick.bind(this);this.mapRef = createRef()}手柄点击(){常量 leafletMap = this.mapRef.current.leafletElement;this.mapRef.current.fitBounds(leafletMap.getBounds());//不起作用LeafletMap.fitBounds(leafletMap.getBounds());//不起作用(只是试图获取标记的边界并调整视图)this.mapRef.current.leafletElement.flyToBounds(leafletMap.getBounds());//不起作用}标记(){if (this.props.search.items instanceof Array) {返回 this.props.search.items.map(function(object, i) {常量位置 = [object._geoloc.lat, object._geoloc.lng];返回<标记位置={位置}><弹出窗口><跨度><h4>{object.title}</h4>{object.address}, <br/>{object.city}、{object.state}、{object.zip} <br/>{object._geoloc.lat}，{object._geoloc.lng}</span></弹出窗口></标记>})}}使成为() {const hasLoaded = this.props.search.items instanceof Array;如果(！已加载){返回空值；}常量位置 = [this.props.search.items[0]._geoloc.lat, this.props.search.items[0]._geoloc.lng];返回 (<div className="leaflet-map-container"><div onClick={this.handleClick}>你好</div><地图中心={位置} zoom={13} ref={this.mapRef}>

提前致谢.

解决方案

这是一个如何通过 完成的示例react-leaflet

handleClick() {常量映射 = this.mapRef.current.leafletElement;//获取本地地图实例常量组 = this.groupRef.current.leafletElement;//获取本机featureGroup实例map.fitBounds(group.getBounds());}

在哪里

<button onClick={this.handleClick}>缩放</button><地图中心={this.props.center}缩放={this.props.zoom}参考={this.mapRef}>

对应于

var leafletMap = new L.featureGroup([marker1, marker2, marker3]);map.fitBounds(leafletMap.getBounds());

这是一个演示

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

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());

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.).

Here is my code.

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="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <FeatureGroup>
            {this.markers()}
          </FeatureGroup>
        </Map>
      </div>
    )
  }
}

Thanks in advance.

解决方案

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

where

<div>
    <button onClick={this.handleClick}>Zoom</button>
    <Map
      center={this.props.center}
      zoom={this.props.zoom}
      ref={this.mapRef}
    >
      <TileLayer
        attribution='&amp;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>

which corresponds to

var leafletMap = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(leafletMap.getBounds());

Here is a demo

这篇关于使用 Leaflet-react 时如何调用 fitBounds()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！