React-Leaflet 在 map 的中心添加標志

Question

我在 map 上添加了一個顯示中心的標志。

<MapContainer fullscreenControl={true}
                    center={center} zoom={18}
                    maxNativeZoom = {22}
                    maxZoom={22}
                    className={"sign-of-center-of-map"}>

.sign-of-center-of-map:before {
    position: absolute;
    content: "\271B";
    z-index: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 3rem;
    opacity: 0.7;
}

但是當我這樣做時，map 上的圖層變得不可點擊。 我更改了圖層的 z-index 但這並沒有解決問題。 我應該添加一些東西到 CSS 還是使用不同的方法？

Answer 1

你應該使用更好的方法來實現這個功能， React-leaflet有Control功能，你可以添加任何你想要的到你的 map

例如：

import L from "leaflet";

createDivControl() {
const MapHelp = L.Control.extend({
  onAdd: (map) => {
    const signOfCenterOfMap = L.DomUtil.create("div", "");
    this.signOfCenterOfMap = signOfCenterOfMap;
    // set the inner content from the props
    signOfCenterOfMap.innerHTML = this.props.title; // it can be your icon

    // return the div
    return signOfCenterOfMap;
  }
});
return new MapHelp({ position: "bottomright" })} // 'bottomleft','bottomright', ...

在這個例子中，你必須設置你的 div 的 position