10

React-leaflet 很好地提供了将内容放入Popup标记中的能力。

例如在我的例子中：

            <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

22

更新： 事件行为#

在 Marker 组件中使用 eventHandlers 监听函数：

<Marker
  position={[50.5, 30.5]}
  eventHandlers={{
    click: (e) => {
      console.log('marker clicked', e)
    },
  }}
/>
于 2020-11-24T12:42:57.110 回答
3

根据react-leaflet 文档，

Leaflet 暴露了自己的事件，与 React 不同。您可以使用 React-Leaflet 通过向以 on 为前缀的属性添加回调来收听它们。例如：<Map onMoveend={this.handleMoveend}>...</Map>。

检查 Leaflet 的文档以了解与每个组件关联的事件。

因此我们可以使用 Leaflet 原生的onClick DOM 事件。

使用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 回答
2

对于想要传递参数的人，您应该使用：

<Marker
  position={[50.5, 30.5]}
  data="FooBar"
  eventHandlers={{
    click: (e) => {
      console.log(e.target.options.data);  // will print 'FooBar' in console
    },
  }}
/>
于 2021-06-30T10:10:38.810 回答
1

我发现了一种技巧，可以在点击标记时执行任意操作。(1) 保留弹出窗口，但让其内容随心所欲（例如，默认打开模式）和 (2) 使用 CSS 隐藏弹出窗口的容器 div。

就我而言，它看起来像这样：地图视图，保持不变：

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

然后之前在弹出窗口中的 ItemGrid 更改为包含模式。（这里我们使用 reactstrap 组件并将模态设置为truewhnn 组件安装。）：

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 回答