React Leaflet——地图辅助按钮

Question

我有一个简单的 React Leaflet 设置：

return (
    <MapContainer center={position} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  )

我想在顶部中央添加一个简单的 bootstrap class 按钮 -- 在地图上是这样的

<button className="btn btn-primary">Button stuff</button>

我如何使用上面的代码将其添加到地图中...或者 React leaflet 的变体？

谢谢凯伦

Answer 1

您可以通过扩展传单并应用 css class 使按钮居中来创建自己的自定义组件：

function BootstrapButton() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    var button = L.control({
      position: "topright"
    });

    button.onAdd = function (map) {
      this._div = L.DomUtil.create("div", "myControl");
      const buttonElement = `<div class="btnWrapper">
      <button class="btn btn-primary">Button stuff</button>
      </div>`;

      this._div.innerHTML = buttonElement;
      return this._div;
    };

    button.addTo(map);

    return () => map.remove(button);
  }, [map]);

  return null;
}

styles.css:

.btnWrapper {
  width: 100vw;
  display: flex;
  justify-content: center;
}

并像这样使用它<MapContainer>...<BootstrapButton/></MapContainer>

Demo

React Leaflet——地图辅助按钮

React Leaflet -- button on map assistance

leaflet

reactjs

bootstrap-4

react-leaflet