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