3

我正在尝试扩展一个 react-leaflet 组件，以便可以向它添加自定义变量。

我需要向折线添加一个“id”（因此当用户单击它时，我可以检索该 id 并在后面进行服务器调用以收集其上的数据）。我不得不对标记做同样的事情并找到了这个解决方法：

markers = nextProps.buses.map((bus, i) => {
  let iconCustom = new L.Icon.Default({internalId: bus.internalId});
  this.markersDirectAccess[bus.internalId] = {
    ...bus
  };

  return {
    lat: bus.latitude,
    lng: bus.longitude,
    popup: bus.busId,
    options: {icon: iconCustom}
  }
});

我不完全确定这是否是正确的方法。但是当涉及到折线组件时，我被卡住了。我找到了这个答案，我想将它应用到 react-leaflet 但我不知道该怎么做。这是我的扩展组件的当前状态：

import L from 'leaflet'
import { Polyline } from 'react-leaflet'
import PropTypes from 'prop-types';


export default class PolylineCustomId extends Polyline {
  static propTypes = {
    positions:  PropTypes.array,
  }

  createLeafletElement (props: Object): Object {
    return L.Polyline(props)
  }
}
4

1 回答 1

2

我认为您不需要为此定制组件。您可以简单地为将返回其 id 的每条折线添加一个单击处理程序。看这个例子：

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'
      />
      {this.state.polylines.map(polyline => 
          <Polyline
            key={polyline.id}
            positions={polyline.coords}
            onClick={() => alert('clicked ' + polyline.id)}
            />
        )
      }
    </Map>
  )
}

这是一个带有工作示例的 jsfiddle：https ://jsfiddle.net/31euue73/1/

于 2017-05-31T14:31:29.447 回答