Popup always open in the marker

问题

is there any way popup always stay open ? Not having the need to click on it to open.

Expected behavior

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

Actual behavior

http://take.ms/cUej0

回答1:

What you can do is to make your own Marker class from the react-leaflet marker, and then call the leaflet function openPopup() on the leaflet object after it has been mounted.

// 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();
    }
}

This will make the popup open once the component has been mounted, and will also behave like a normal popup afterwards, ie. on close/open.

I threw together this fiddle that shows the same code together with the basic example.

回答2:

With the introduction of react-leaflet version 2 which brings breaking changes in regard of creating custom components, it is no longer supported to extend components via inheritance (refer this thread for a more details)

In fact React official documentation also recommends to use composition instead of inheritance:

At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies.

Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.

The following example demonstrates how to extend marker component in order to keep popup open once the marker is displayed:

const MyMarker = props => {

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

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

Explanation:

get access to native leaflet marker object (leafletElement) and open popup via Marker.openPopup method

Here is a demo

回答3:

You can use permanent tooltips, or React provides refs for this type of thing... you can do this:

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'))

References:

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

React.js - access to component methods

Auto open markers popup on react-leaflet map

来源：https://stackoverflow.com/questions/38730152/popup-always-open-in-the-marker

标签

react-leaflet