67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
import { useState } from "react";
|
||
import LocationIcon from "zy-react-library/components/Icon/LocationIcon";
|
||
import MapSelector from "zy-react-library/components/Map/MapSelector";
|
||
|
||
function BaiduMap({
|
||
longitude,
|
||
latitude,
|
||
disable = true,
|
||
onChange,
|
||
onConfirm,
|
||
enablePointSelect,
|
||
onPointSelect,
|
||
}) {
|
||
const [mapVisible, setMapVisible] = useState(false);
|
||
const [selectedLocation, setSelectedLocation] = useState({
|
||
longitude: "",
|
||
latitude: "",
|
||
});
|
||
const currentLongitude = longitude || selectedLocation.longitude;
|
||
const currentLatitude = latitude || selectedLocation.latitude;
|
||
const mapDisabled = disable && !enablePointSelect;
|
||
|
||
const handleConfirm = (nextLongitude, nextLatitude, extra) => {
|
||
setSelectedLocation({
|
||
longitude: nextLongitude,
|
||
latitude: nextLatitude,
|
||
});
|
||
onPointSelect?.(nextLongitude, nextLatitude, extra);
|
||
onChange?.(nextLongitude, nextLatitude, extra);
|
||
onConfirm?.(nextLongitude, nextLatitude, extra);
|
||
setMapVisible(false);
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
|
||
<span>
|
||
经度：
|
||
{currentLongitude || "-"}
|
||
</span>
|
||
<span>
|
||
纬度：
|
||
{currentLatitude || "-"}
|
||
</span>
|
||
<LocationIcon onClick={() => {
|
||
setMapVisible(true);
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{mapVisible && (
|
||
<MapSelector
|
||
visible={mapVisible}
|
||
onClose={() => setMapVisible(false)}
|
||
longitude={currentLongitude}
|
||
latitude={currentLatitude}
|
||
disable={mapDisabled}
|
||
onConfirm={handleConfirm}
|
||
type="cesium"
|
||
/>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default BaiduMap;
|