弹出总是在标记打开

Question

有没有什么办法弹出始终保持开放？不具有需要点击就可以打开。

Expected behavior

https://monosnap.com/file/mPkuSTmPAfwxTxY99YQVA5m96Zolow.png

Actual behavior

http://take.ms/cUej0

Answer 1

你可以做的是让从反应小叶的标记自己的标记类，然后调用单张对象的单张功能openPopup（）已安装后。

// Create your own class, extending from the Marker class.
class ExtendedMarker extends Marker {
    componentDidMount() {
        // Call the Marker class componentDidMount (to make sure everything behaves as normal)
        super.componentDidMount();

       // Access the marker element and open the popup.
      this.leafletElement.openPopup();
    }
}

这将使弹出打开，一旦组件已安装，也将像一个正常弹出之后，即。在关闭/打开。

我扔了这份fiddle，与基本的例子一起显示了相同的代码。

Answer 2

随着引进react-leaflet version 2带来的creating custom components的方面重大的变动，就不再支持通过继承来扩展组件（参见this thread的更多细节）

事实上React official documentation还建议使用组成，而不是继承的：

在Facebook上，我们使用数千组分反应，而我们还没有发现任何使用情况下，我们会建议创建组件继承层次。

道具和组成给你所有你需要自定义组件的外观和行为在一个明确的和安全的方式的灵活性。请记住，组件可以接受任意的道具，包括原始值，反应的元素，或功能。

下面的例子演示一旦显示标记如何以保持弹出打开扩展标记组件：

const MyMarker = props => {

  const initMarker = ref => {
    if (ref) {
      ref.leafletElement.openPopup()
    }
  }

  return <Marker ref={initMarker} {...props}/>
}

说明：

可以访问通过leafletElement体小叶标记对象（Marker.openPopup method）和开放式弹出

Here is a demo

Answer 3

您可以使用永久tooltips，或作出反应提供了对于裁判这种类型的事情......你可以这样做：

https://jsfiddle.net/jrcoq72t/121/

const React = window.React
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet

class SimpleExample extends React.Component {
  constructor () {
    super()
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13
    }
  }

  openPopup (marker) {
    if (marker && marker.leafletElement) {
      window.setTimeout(() => {
        marker.leafletElement.openPopup()
      })
    }
  }

  render () {
    const position = [this.state.lat, this.state.lng]
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
        <Marker position={position} ref={this.openPopup}>
          <Popup>
            <span>
              A pretty CSS3 popup. <br /> Easily customizable.
            </span>
          </Popup>
        </Marker>
      </Map>
    )
  }
}

window.ReactDOM.render(<SimpleExample />, document.getElementById('container'))

参考文献：

https://reactjs.org/docs/refs-and-the-dom.html

React.js - access to component methods

Auto open markers popup on react-leaflet map