リアクションリーフレットでマーカーのコレクションの境界を取得する方法

Question

マーカーのコレクションの境界を取得すると、これらの境界を使用してreact-leafletマップ上のすべてのマーカーを表示できますか？

render() { 
    const position = [51.505, 4.12]; 

    return (
     <Map center={position} zoom={3} style={{width: '100%', height: '600px'}} > 
      <TileLayer 
       attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
      /> 
      {this.state.markers || null} 
     </Map> 
    ); 
} 

マーカーがでthis.state.markersに追加されます： これは私のレンダリング機能で表示されているばかり

this.state.markers.push(
    <Marker position={position}> 
     <Popup> 
      <span>Hello</span> 
     </Popup> 
    </Marker> 
); 
this.setState({markers: this.state.markers}); 

マーカーが、私はそう調整する境界と地図の中心にしたいですマーカーは、マップのビューポート内に一定量のパディングを入れてうまく収まります。

これを行う方法に関するアイデアはありますか？

編集：これは私のimport文です：import {Map, Marker, Popup, TileLayer} from 'react-leaflet';

Answer 1

あなたはMap componentにboundsパラメータを追加することができます。それはleaflet latLngBounds引数を受け入れます。したがって、次の操作を行うことができます：

import {latLngBounds} from 'leaflet' 

... 

render() { 
    const bounds = latLngBounds([firstCoord, firstCoord]) 
    markerData.forEach((data) => { 
    bounds.extend(data.latLng) 
    }) 

    return (
    <Map bounds={bounds} > 
     ... 
    </Map> 
) 
}