是否可以设置react-leaflet.js.org随附的弹出窗口的样式?我一直在努力寻找样式,但是您能为弹出窗口获取ui模板吗?还是完全改变弹出窗口外观的正确方法是什么?
代码段
<Marker
key={message._id}
position={[message.latitude, message.longitude]}
icon="">
<Popup className="request-popup">
<p>...</p>
<p>...</p>
</Popup>
</Marker>
我想设置弹出窗口的样式,使其类似于以下内容
谢谢
答案 0 :(得分:2)
您可以通过分配的request-popup
类来更改传单弹出窗口的内置外观,例如更改弹出窗口的边框半径
.request-popup .leaflet-popup-content-wrapper {
border-radius: 0px;
}
要编写自定义文本并赋予其个人风格,我建议创建一个名为f.i popupStyles.js的文件。在此声明所有弹出式样式。然后,将其导入Map comp中并编写一个html。使用引导程序来获得所需的利润和其他好处。
popupStyles.js
const popupContent = {
textAlign: "center",
height: "350px",
marginTop: "30px"
};
const popupHead = {
fontWeight: "bold",
fontSize: "22px"
};
const popupText = {
fontSize: "15px",
marginBottom: "20px"
};
const okText = {
fontSize: "15px"
};
export { popupContent, popupHead, popupText, okText };
然后在comp
import { popupContent, popupHead, popupText, okText } from "./popupStyles";
<Marker position={center} icon={defaultMarker}>
<Popup className="request-popup">
<div style={popupContent}>
<img
src="https://cdn3.iconfinder.com/data/icons/basicolor-arrows-checks/24/149_check_ok-512.png"
width="150"
height="150"
/>
<div className="m-2" style={popupHead}>
Success!
</div>
<span style={popupText}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</span>
<div className="m-2" style={okText}>
Okay
</div>
</div>
</Popup>
</Marker>
答案 1 :(得分:1)
我刚刚尝试使用样式化的组件对它进行样式设置,...它的功能真棒! :)
import React, { useCallback, useState } from "react";
import styled from "styled-components";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import { Icon } from "leaflet";
const StyledPop = styled(Popup)`
background-color: red;
border-radius: 0;
.leaflet-popup-content-wrapper {
border-radius: 0;
}
.leaflet-popup-tip-container {
visibility: hidden;
}
`;
const icon = new Icon({
iconUrl: "/marker.svg",
iconSize: [25, 25],
});
export const MapView = () => {
const [position, setPosition] = useState(null);
const handleOnContextMenu = useCallback(
(event) => {
setPosition([event.latlng.lat, event.latlng.lng]);
},
[setPosition]
);
return (
<Container>
<Map
center={[50.061252, 19.915738]}
zoom={15}
oncontextmenu={handleOnContextMenu}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{position && (
<StyledPop position={position} onClose={() => setPosition(null)}>
<div>
<h2>menu</h2>
</div>
</StyledPop>
)}
{position && <Marker position={position} icon={icon} />}
</Map>
</Container>
);
};