問題描述

我想創(chuàng)建一個帶有顯示鼠標實際位置 (x,y) 的 react-leaflet 的自定義組件，但我不知道如何創(chuàng)建它.我找到了 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.

推薦答案

根據(jù) 文檔，創(chuàng)建一個自定義組件需要以下步驟:

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)實現(xiàn)createLeafletElement(props:Object):Object方法創(chuàng)建相關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);

下面的例子演示了如何創(chuàng)建一個自定義組件來顯示鼠標在地圖上的實際位置(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 創(chuàng)建自定義組件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！