[英]React-Leaflet adding sign on center of map
我在 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 还是使用不同的方法?
你应该使用更好的方法来实现这个功能, 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.