問題描述

我想創建一個帶有顯示鼠標實際位置 (x,y) 的 react-leaflet 的自定義組件，但我不知道如何創建它.我找到了 react-leaflet-control 但它似乎不是最新的，當然我閱讀了 api 文檔 https://react-leaflet.js.org/docs/en/custom-components.html 但我不明白:/

I would like to create a custom component with react-leaflet that shows the actual position (x,y) of the mouse, but I don't know how to create it. I found react-leaflet-control but it seems that it is not up to date, of course I readded the api documentation https://react-leaflet.js.org/docs/en/custom-components.html but I did not understand it :/

誰能給我一個自定義組件的例子，只要一個顯示Hello world"的組件就足夠了.

Can someone give me an exemple of a custom component please, juste a component that display "Hello world" whould be more than enought.

推薦答案

根據 文檔，創建一個自定義組件需要以下步驟:

As per documentation, to create a custom component the following steps are required:

1)擴展React-Leaflet提供的抽象類之一，例如:

1)extend one of the abstract classes provided by React-Leaflet, for example:

class MapInfo extends MapControl {
   //...
} 

2)實現createLeafletElement(props:Object):Object方法創建相關Leaflet元素實例，例如:

2)implement createLeafletElement (props: Object): Object method to create the relevant Leaflet element instance, for example:

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 包裝您的自定義組件，例如:

3) wrap your custom component using the withLeaflet() HOC, for example:

export default withLeaflet(MapInfo);

下面的例子演示了如何創建一個自定義組件來顯示鼠標在地圖上的實際位置(lat,lng):

The following example demonstrates how create a custom component to display the actual position (lat,lng) of the mouse on map:

演示

這篇關于react-leaflet 創建自定義組件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！