单张弹出不会打开（反应）

我正在为我正在使用单张（react-leaflet）的反应应用程序的地图视图工作。我可以在地图上绘制标记，但是我已经绑定到他们的弹出窗口在点击时不会打开。我第一次尝试使用<Marker>和<Popup>组件，但this Github问题表明，从地图组件中获取传单地图对象并将标记明确绑定到它可能会更好。这是我有：单张弹出不会打开（反应）

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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       /> 
      </Map> 
     </div> 
    ); 
}

即使我去掉了marker.on('click'...)线，该console.log似乎永远不会触发。任何人有任何想法可能会发生什么？

来源

2016-07-27 Matt

这个issue已过期，作为October 7, 2015。添加动作监听器的孩子已经修复。以下是如何在弹出窗口中添加缩放操作的示例。

<Marker position={position}> 
    <Popup> 
     <span> 
     <button onClick={this.zoomOut}> 
      Zoom out 
     </button > 
     <button onClick = {this.zoomIn}> 
      Zoom in 
     </button> 
     </span> 
    </Popup > 
    </Marker>

这个jsfiddle是一个工作的例子。

来源

2016-07-28 14:14:31 Joel

单张弹出不会打开（反应）

回答

相关问题