zcloud_gbs_iotalarm-react/src/components/BaiduMap/index.js

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;