我正在为我正在使用 Leaflet 的 React 应用程序制作 map View (react-leaflet)。我可以在 map 上绘制标记,但我绑定(bind)到它们的弹出窗口在单击时不会打开。我首先尝试使用 <Marker>
和 <Popup>
组件,但是 this Github 问题建议从 map 组件中获取传单 map 对象并将标记显式绑定(bind)到它可能会更好。这是我的:
componentDidUpdate() {
this.map = this.refs.map.leafletElement;
this.state.rows.map((row) => {
var marker = L.marker([row.coordinate.latitude, row.coordinate.longitude]);
marker.addTo(this.map);
var popupText = util.format('<b>%s</b>', row.venue)
for(var i = 0; i < row.beers.length; i++){
var beer = row.beers[i];
popupText += util.format('<br>%s: %s - %d', beer.brewery, beer.name, beer.rating)
}
marker.bindPopup(popupText);
//marker.on('click', function(e){console.log('clicked!')})
});
}
render(){
const cover = {position: 'absolute', left: 0, right: 0, top: 50, bottom: 0};
return(
<div>
<Map scrollWheelZoom={false} center={this.state.position} zoom={14} style={cover} ref="map">
<TileLayer
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
</Map>
</div>
);
}
即使我取消注释 marker.on('click'...)
线,console.log
似乎永远不会开火。任何人对可能发生的事情有任何想法吗?
最佳答案
这issue自 October 7, 2015 起已过期.添加带有 Action 监听器的 child 已得到修复。下面是一个示例,说明如何在弹出窗口中添加缩放操作。
<Marker position={position}>
<Popup>
<span>
<button onClick={this.zoomOut}>
Zoom out
</button >
<button onClick = {this.zoomIn}>
Zoom in
</button>
</span>
</Popup >
</Marker>
这jsfiddle是一个工作示例。
关于javascript - 传单弹出窗口不会打开( react ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38617758/