Question

应该如何编写在地图上输出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-leaftlet-test

的回购

Answer 1

我遇到了同样的问题，在阅读文档时我发现我需要在地图组件中添加{'a': ['b','c'], 'b': 'd'}，然后使用道具ref='map'将其传递给子组件，将它们链接到实际的传单Map，就像使用leafletjs一样。

内部发生的事情是它尝试map={this.props.map}或类似的东西，将地图视为未定义

Answer 2

对于当前版本的react-leaflet，"React-Leaflet uses React's context API to make Leaflet elements available to other element that need it."。因此错误Uncaught TypeError: Cannot read property 'addLayer' of undefined表示无法找到layerContainer（默认为传单地图）。

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

来修复错误

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

如何编写一个输出反应传单标记的组件？

2 个答案: