2

应该如何编写在地图上输出 Marker 的自定义反应组件?我需要像这样工作:

import MyMarker from './MyMarker.js';

const builtMarker = (function() {
  const position = [51.520, -0.11];
  return (
    <MyMarker position={position}/>
  );
})();

render(
  <div>
    <h1>Hello, world!</h1>
    <div className="map">
        <Map center={center} zoom={13}>
            <TileLayer
            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />
            {builtMarker}
        </Map>
    </div>
  </div>
  ,
  document.getElementById('example')
);

我制作了MyMarker这样的组件https://github.com/varya/react-leaftlet-test/blob/master/src/MyMarker.js但这会出错:

Uncaught TypeError: Cannot read property 'addLayer' of undefined

我想组件不仅应该扩展MapLayer,还应该提供特殊的接口。什么不见​​了?我在文档中找不到类似的例子。

另外,我应该怎么做才能输出几个标记?我的意思是,在 React 中,它需要在一个包装器中。但它不能只<div>用于地图。这个包装器应该怎么写?

PS:这是我展示我的案例的仓库 https://github.com/varya/react-leaflet-test

4

2 回答 2

1

我遇到了同样的问题,阅读文档后我发现我需要将 a 添加ref='map'到 map 组件中,然后将它与 props一起传递map={this.props.map}给子组件,将它们链接到实际的传单 Map 就像你使用的那样传单。

内部发生的事情是它尝试到 amap.addLayer(this)或类似的东西,发现 map 未定义

于 2016-02-15T23:46:17.883 回答
0

对于当前版本react-leaflet“React-Leaflet 使用 React 的上下文 API 使 Leaflet 元素可用于其他需要它的元素。” . 所以错误Uncaught TypeError: Cannot read property 'addLayer' of undefined表示layerContainer找不到(默认为传单地图)。

您可以通过将上下文访问的实例发送到react-leaflet组件来修复错误

<MyMarker position={position} layerContainer={layerContainer} />

于 2016-10-06T23:34:43.093 回答