1.2.3 • Published 7 months ago
@daoyi/coordinates-editor-modal v1.2.3
@daoyi/coordinates-editor-modal
A React modal component for editing coordinates (latitude & longitude) easily, with integrated map and table interface.
🗺️ 經緯度編輯元件，整合地圖與表格輸入，支援自訂樣式、外部查詢、自動同步。
📦 Installation
npm install @daoyi/coordinates-editor-modal此元件依賴以下套件，請一併安裝（若尚未安裝）：
npm install react react-dom @mui/material @mui/icons-material react-leaflet leaflet axios uuid🚀 Usage
import React, { useState } from "react";
import { CoordinatesModal } from "@daoyi/coordinates-editor-modal";
export default function App() {
const [open, setOpen] = useState(false);
return (
<CoordinatesModal
open={open}
setOpen={setOpen}
title="測試地區"
coordinateOptions={[
{ label: "地點 A", longitude: "121.5", latitude: "25.0" },
{ label: "地點 B", longitude: "121.6", latitude: "25.1" }
]}
onClick={(coords) => console.log("儲存結果", coords)}
/>
);
}⚙️ Props 說明
| Prop | Type | Description |
|---|---|---|
open | boolean | 控制 modal 是否開啟 |
setOpen | (val: boolean) => void | 切換開關狀態 |
readOnly | boolean | 是否為唯讀模式 |
isLoading | boolean | 是否顯示 loading 效果 |
locations | string[] | 初始地點（字串）陣列 |
title | string | modal 顯示標題 |
tableInfo | string | 表格上方提示文字 |
tableHeader | string[] | 表格欄位標題（預設為名稱/經度/緯度） |
mapInfo | string | 地圖上方提示文字 |
coordinateOptions | { label, longitude, latitude }[] | 可選的地點與經緯度資料 |
googleMapsGeoApiKey | string | Google Maps Geocoding API Key（可選） |
getCoordinates | (label: string) => Promise<{ label, longitude, latitude }> | 自定查詢座標函式 |
mapCenter | [number, number] | 地圖中央預設經緯度 |
mapZoom | number | 地圖遠近 |
onClick | (coordinates) => void | 按下「確定」時觸發，回傳目前所有經緯度資料 |
infoIcon, addCoordinatesIcon, deleteIcon, mapPinIcon | React.ReactNode | 自訂圖示元件 |
xxxSx | object | 提供 MUI sx 自訂樣式，包含 modal、button、表格、地圖等元件 |
🛠 Peer Dependencies
| 套件 | 說明 |
|---|---|
react, react-dom | React 16.8+ |
@mui/material, @mui/icons-material | UI 元件（button, modal, icon） |
react-leaflet, leaflet | 地圖功能 |
axios | 查詢外部 API |
uuid | 產生唯一 ID |
請確保這些依賴已安裝：
npm install react react-dom @mui/material @mui/icons-material react-leaflet leaflet axios uuid📦 原始碼與套件資訊
此專案托管於 GitLab，並發佈於 npm：
- GitLab Repo：
https://gitlab.daoyidh.com/npm/coordinates-editor-modal.git - npm 頁面：@daoyi/coordinates-editor-modal
📄 License
ISC License
© DaoYi Technology
© Johnny 蔡政軒