4

現在、以下に示すように、境界パラメーターを渡すことにより、反応リーフレット マップの境界を設定しています。

   <div hidden={!this.props.hide && !this.props.toggle} className="map-container">

       <Leaflet.Map ref='leaflet-map' bounds={ this.getBounds()} >

       <Leaflet.TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>

             { this.geoResults().map(this.renderMarker) }


       </Leaflet.Map>

   </div>

問題は、マップの最も外側の部分 (ビュー内) にマーカーがレンダリングされることがあるため、マップをドラッグするか、1 か所をズームアウトしない限り、マーカーが表示されないことです。これをバッファで修正しようとしていたか、境界をプロットしてからズームを使用して一度ズームアウトしようとしましたが、何も機能していないようです。何かアイデアはありますか？

4

1 に答える 1

12

解決

boundsOptionsコンポーネントの属性を使用Mapして、リーフレットのfitBounds()メソッドにオプションを渡すことができます。paddingこれらのオプションでは、たとえば境界を「埋める」ように定義できます。

react-leaflet マップのドキュメントから:

boundsOptions: オブジェクト (オプション): fitBounds() メソッドに渡されるオプション。

leaflet fitBounds オプションのドキュメントから:

padding: 左上と右下の両方のパディングを同じ値に設定するのと同じです。

例

したがって、次のようなものが機能するはずです（実際にはテストしませんでした）：

<Leaflet.Map
  ref='leaflet-map'
  bounds={this.getBounds()}
  boundsOptions={{padding: [50, 50]}}
/>

そのように Map 要素を定義すると、境界が埋められるはずです。ニーズに合わせてパディング値を調整します。

別のアプローチ

関数の境界にパディングを追加できますgetBounds()。

于 2016-06-30T18:27:56.410 に答える