10

PopupReact-leafletは、マーカー内にコンテンツを配置する機能をうまく提供します。

たとえば、私の例では：

            <Marker position={[item.lat, item.lng]} key={item.machineid}>
              <Popup maxWidth={720}>
                <ItemGrid machineid={item.machineid}
                          username={this.props.username}/>
              </Popup>
            </Marker>

ただし、このコンテンツが大きすぎると、特にモバイルでは扱いにくくなる可能性があります。マーカーのクリックで (ブートストラップ) モーダル インターフェイスをアクティブにしたいと思います。反応リーフレットでそれを行う方法はありますか?

4

4 に答える 4

3

反応リーフレットのドキュメントに従って、

Leaflet は、React とは異なり、独自のイベントを公開します。on を前に付けたプロパティにコールバックを追加することで、React-Leaflet を使用してそれらをリッスンできます。例: <Map onMoveend={this.handleMoveend}>...</Map>.

各コンポーネントに関連付けられたイベントについては、Leaflet のドキュメントを確認してください。

したがって、Leaflet のネイティブonClick DOM eventを使用できます。

ではreact-leaflet、次のようになります。

import React, { Component } from "react"
import { Map as LeafletMap, TileLayer, Marker } from "react-leaflet"

class Map extends Component {
  handleClick = event => {
    const { lat, lng } = event.latlng
    console.log(`Clicked at ${lat}, ${lng}`)
  }

  render () {
    return (
      <LeafletMap center={[52.5134, 13.4225]} zoom={13}>
        <TileLayer attribution={attribution} url={url}>
          <Marker
            position={[52.5134, 13.4225]}
            onClick={this.handleClick} // <-- call handleClick()
          />
        </TileLayer>
      </LeafletMap>
    )
  }
}

export default Map
于 2019-02-11T14:14:43.067 に答える
1

マーカーをタップすると、任意のアクションを実行するハックのようなものを見つけました。(1) ポップアップを保持しますが、そのコンテンツを好きなようにします (例: デフォルトでモーダルを開く)。(2) ポップアップのコンテナー div を CSS で非表示にします。

私の場合、次のように見えました: マップ ビューは変更されません:

<Marker position={[item.lat, item.lng]} key={item.machineid}>
    <Popup maxWidth={720}>
      <ItemGrid machineid={item.machineid}
                         username={this.props.username}/>
    </Popup>
</Marker>

次に、以前は pop にあった ItemGrid がモーダルを含むように変更されます。(ここでは、reactstrap コンポーネントを使用し、モーダルをtrueコンポーネントのマウント時に設定します。):

class ItemGrid extends Component {
  constructor(props){
    super(props);
     this.state = {modal:false}
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  componentDidMount() {
    this.setState({modal:true})
  }

  render()  {
    return (
      <div>
      <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
        <ModalHeader toggle={this.toggle}>Modal Header</ModalHeader>
        <ModalBody>
          {ContentThatWasPreviouslyInPopup}
        </ModalBody>
      </Modal>
    </div>

そして最後にリーフレット CSS で:

.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 8px 0 0;
    text-align: center;
    width: 0px;
    height: 0px;
    font: 0px/0px Tahoma, Verdana, sans-serif; //DANGEROUS HACK
    color: #c3c3c3;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
    }

.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    width: 0px // DANGEROUS HACK
    }
于 2016-12-05T18:05:16.037 に答える