我想使用react-leaflet 创建一个自定义组件,显示鼠标的实际位置(x,y),但我不知道如何创建它。我发现react-leaflet-control
但好像不是最新的,当然我看了api文档https://react-leaflet.js.org/docs/en/custom-components.html但我不明白:/
有人可以给我一个自定义组件的示例吗?只是一个显示的组件“你好世界”就足够了。
As per 文档,创建一个自定义组件需要执行以下步骤:
1)扩展提供的抽象类之一React-Leaflet
, 例如:
class MapInfo extends MapControl {
//...
}
2)实施createLeafletElement (props: Object): Object
方法来创建相关的Leaflet元素实例,例如:
createLeafletElement(opts) {
const MapInfo = L.Control.extend({
onAdd: (map) => {
this.panelDiv = L.DomUtil.create('div', 'info');
return this.panelDiv;
}
});
return new MapInfo({ position: 'bottomleft' });
}
3)使用以下方式包装您的自定义组件withLeaflet()
HOC,例如:
export default withLeaflet(MapInfo);
下面的例子演示了如何创建一个自定义组件显示实际位置(lat,lng)
鼠标在地图上的位置:
Demo
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)