Agrego un letrero en el mapa que muestra el centro.
<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; }Pero cuando hago eso, no se puede hacer clic en las capas del mapa. Cambié el índice z de las capas, pero esto no resolvió el problema. ¿Debo agregar algo a CSS o usar un método diferente?
Debería usar un método mejor para llegar a esta función, React-leaflet tiene una función Control que puede agregar lo que quiera a su mapa
Por ejemplo:
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', ...En este ejemplo, debe establecer la posición de su div