除了这两点,请正常使用Leaflet API,并根据需要将React组件中的回调绑定到Leaflet映射。此时,React只是一个包装器。
import React from 'react';
import ReactDOM from 'react-dom';
class Livemap extends React.Component {
componentDidMount() {
var map = this.map = L.map(ReactDOM.findDOMNode(this), {
minZoom: 2,
maxZoom: 20,
layers: [
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'})
],
attributionControl: false,
});
map.on('click', this.onMapClick);
map.fitWorld();
}
componentWillUnmount() {
this.map.off('click', this.onMapClick);
this.map = null;
}
onMapClick = () => {
// Do some wonderful map things...
}
render() {
return (
<div className='map'></div>
);
}
}