4

我正在为我使用 Leaflet 的反应应用程序（react-leaflet）制作地图视图。我可以在地图上绘制标记，但是我绑定到它们的弹出窗口在单击时不会打开。我首先尝试使用<Marker>和<Popup>组件，但这个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似乎也不会触发。有人对可能发生的事情有任何想法吗？

4

1 回答 1

1

此问题已于 2015 年 10 月 7 日过期。添加带有动作侦听器的子级已得到修复。这是一个如何在弹出窗口中添加缩放操作的示例。

<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-28T14:14:31.000 回答