It depends a bit on what you mean by “Proxi (Crowdsourced Maps)” — e.g. whether you meant Proxi (a platform) or just any crowdsourced map / map‐proxy demo. Here are a few free demos / open tools you can try:

✅ Demo / Free tools you can try now

1. Proxi — Crowdsource Maps
   Proxi offers a free version (limited to 25 points per map) and you can try a demo / start creating a crowdsourced map. proxi.co+1
   You can enable “Let Viewers Suggest Points” to allow crowdsourcing. learn.proxi.co

2. Shareloc (Open Source)
   A free open map API with an online demo at apps.meggsimum.de/shareloc. GitHub
   You can set up your own instance, or use their demo to test features.

3. crowdsourced‑map (no backend server)
   A simple demo that lets anyone add pins to a public map using a Google Form as backend. GitHub
   This is lightweight and good for small experiments.

4. MapProxy Demos
   If by “proxy” you meant tile / map proxying, the MapProxy project has live demos. maps.heigit.org+3proxy.petrimap.net+3osm.citynomadi.com+3
   (MapProxy is generally a tiling / caching / proxying service for map tiles.)

If you tell me more precisely what you meant by "Proxi (Crowdsourced Maps)" — e.g. whether you meant that specific product, or just “a crowdsourced map with proxy / caching features” — I can point you to the best demo for your use case (even one you can host yourself). Do you want me to send you a live working demo link you can interact with (and try adding points)?

這是一個很好的專案想法；下面我先列出整體設計思路 + 可採用的開源方案 + 示範/樣板 + 技術堆疊建議，你可以從中選一條路線來實作。

一、功能需求拆解

你的核心需求是：

• 在地圖上點選一個位置，建立一個 marker（地標點）

• 上傳照片 + 輸入文字描述

• 多人可以操作，資料集中儲存

• 管理者／指揮者可以看到所有標記，進行調度或分析

延伸可能需求還有：

• 標記分類（如災情、道路中斷、水淹、電力中斷等）

• 標記核可流程（先給編輯者審核再上線）

• 標記搜尋 / 篩選 / 分層顯示

• 標記時間維度（看到哪一天的資料）

• 權限管理（某些人只能看，某些人可以編輯／刪除）

• 圖片大小限制 / 壓縮 / 儲存管理

• 地圖底圖樣式、自定義圖資來源

為了避免從零開始做太多東西，建議採用既有的開源框架或樣板，改造或擴充。

二、可參考 / 開源方案

以下是一些可以拿來改造或直接使用的開源／免費專案：

三、技術堆疊建議 & 快速樣板

下面是一條可能的技術路線（比較常見、社群支援也比較多）：

• 前端
    – 地圖展示：Leaflet.js（輕量、簡單好用）或 OpenLayers
    – UI 框架：React / Vue / plain JS + HTML/CSS
    – 圖片上傳表單 + 點擊地圖新增標記功能

• 後端 / API
    – 使用 Node.js (express)、Python (Flask / Django)、或其他你熟悉的語言
    – API 端點：新增標記（含文字 + 圖片）、取得所有標記、編輯刪除標記、授權驗證
    – 儲存：資料庫（MySQL / PostgreSQL / SQLite / MongoDB）儲存標記資料；圖檔儲存在檔案系統或雲端儲存（如 AWS S3 / 本機uploads 資料夾）
    – 圖片處理：上傳時檢查檔案大小 / 類型，可能做壓縮或重製尺寸

• 認證 / 權限
    – 若多使用者環境，應設計使用者登入 / 權限控制
    – 審核機制：普通用戶上傳標記先進入待核可狀態，管理員審核後才顯示

• 地圖圖資 / 底圖
    – 可使用 OpenStreetMap 或其他免費地圖圖塊供應商（如 Mapbox 的免費方案、或 Maptiler、Carto 等）
    – 若人流多或流量大，需考慮圖塊快取或代理服務

• 篩選 / 搜索 / 分層顯示
    – 標記可帶分類屬性，在前端可切換哪些類別要顯示
    – 提供搜尋／關鍵字過濾

• 時間線 / 歷史資料（若需要）
    – 每個標記可記錄時間戳，前端可能提供 slider 或時間選擇器來過濾

四、部署方式與參考流程 (以簡單示範為例)

以下是一個從零到有的簡易示範流程（假設你用 Python Flask + Leaflet）：

1. 建立專案、安裝 Flask、設定基本 API

2. 前端建立 Leaflet 地圖，載入初始標記（呼叫 GET /markers API）

3. 在地圖點擊事件中打開一個上傳對話窗（讓使用者選定上傳照片 + 填文字）

4. 提交資料到後端 API POST /markers，後端處理儲存資料與圖片，回傳新標記資訊

5. 前端收到回傳後，在地圖上加上該標記（marker + popup 顯示圖片與文字）

6. 管理介面：列出所有標記，可審核 / 編輯 / 刪除

7. 部署上線，搭配 HTTPS / 安全檢查 / 圖檔大小限制

這樣一來，即可達到你想要的「多人在地圖上點位置 + 上傳照片 + 輸入文字」功能。

五、示範 / 快速 prototype

如果你願意嘗試一個快速 prototype（樣板）：

• 先拿 map-with-markers 專案：克隆下來，跑本地環境，看看上傳 + 顯示標記的流程怎麼實作 GitHub

• 或者拿 crowdsourced-map 專案，看看它如何管理使用者提交的標記 GitHub

• 在這些樣板上加入你專案需要的欄位（如：標記類別、時間戳、審核狀態）

你也可以先做一個簡易的 mock-up（雛形網頁）讓同仁測試，收集意見，再漸進開發。

如果你願意，我可以幫你做一個最簡易可運行的樣板原始碼（Flask + Leaflet）給你，你可以自己部署在伺服器上。要嗎？

下面我幫你做一個最簡易可運行的範本：用 Flask + Leaflet.js，可以在地圖上點擊新增標記（marker），並附帶文字與圖片上傳；後端儲存資料（純示範用途、沒做完全的安全性與驗證）

你可以拿這個範本為基礎改造、擴充。

一、專案目錄結構範例

arduino
複製程式碼
flask_map_app/
│
├── app.py
├── templates/
│   └── index.html
└── static/
    ├── uploads/        ← 圖片上傳儲存目錄（Web 可瀏覽或保護設定看你的需求）
    ├── css/
    │    └── style.css
    └── js/
         └── map.js

二、程式碼範例

下面是各檔案的內容範本：

app.py

python
複製程式碼
import os
from flask import Flask, render_template, request, jsonify, send_from_directory
from werkzeug.utils import secure_filename

app = Flask(__name__)

# 圖片上傳設定
UPLOAD_FOLDER = os.path.join(app.root_path, 'static', 'uploads')
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
# 限制允許的副檔名
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

# 暫存標記資料 (示範用，重啟會消失)  
# 真實應用應該用資料庫
markers = []  # 每個 marker 是 dict：{ "lat": ..., "lng": ..., "text": ..., "image_url": ... }

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/markers', methods=['GET'])
def get_markers():
    return jsonify(markers)

@app.route('/markers', methods=['POST'])
def post_marker():
    lat = request.form.get('lat')
    lng = request.form.get('lng')
    text = request.form.get('text', "")
    file = request.files.get('image')

    if not lat or not lng:
        return jsonify({"error": "no lat/lng"}), 400

    image_url = None
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        savepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(savepath)
        # 這裡假設你的站點是跟 static 路徑對應，image_url 用相對 static 的URL
        image_url = f"/static/uploads/{filename}"

    marker = {
        "lat": float(lat),
        "lng": float(lng),
        "text": text,
        "image_url": image_url
    }
    markers.append(marker)
    return jsonify(marker), 201

if __name__ == '__main__':
    app.run(debug=True)

templates/index.html

html
複製程式碼
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>災情地圖示範</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha512‑…"
    crossorigin=""/>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
  <h2>災情地圖（點擊地圖可以新增標記）</h2>
  <div id="map" style="height: 600px;"></div>

  <!-- 上傳表單對話框 -->
  <div id="formPopup" style="display: none; position: absolute; background: white; padding: 10px; border: 1px solid #666;">
    <form id="markerForm">
      <input type="hidden" id="lat" name="lat">
      <input type="hidden" id="lng" name="lng">
      <div>
        <label>文字描述：</label><br>
        <textarea name="text" id="text" rows="3" cols="30"></textarea>
      </div>
      <div>
        <label>上傳圖片：</label>
        <input type="file" name="image" id="imageFile" accept="image/*">
      </div>
      <div style="margin-top: 5px;">
        <button type="submit">送出</button>
        <button type="button" id="cancelBtn">取消</button>
      </div>
    </form>
  </div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha512‑…"
    crossorigin=""></script>
  <script src="{{ url_for('static', filename='js/map.js') }}"></script>
</body>
</html>

static/js/map.js

javascript
複製程式碼
// 初始化地圖
var map = L.map('map').setView([23.5, 121.5], 8);

// 使用 OpenStreetMap 圖磚層
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 載入現有標記
function loadMarkers() {
    fetch('/markers')
    .then(res => res.json())
    .then(data => {
        data.forEach(m => {
            addMarkerToMap(m);
        });
    });
}

// 在地圖上加入標記與 popup
function addMarkerToMap(m) {
    var marker = L.marker([m.lat, m.lng]).addTo(map);
    var popupHtml = `<div>${m.text || ''}</div>`;
    if (m.image_url) {
        popupHtml += `<div><img src="${m.image_url}" style="max-width:200px;"></div>`;
    }
    marker.bindPopup(popupHtml);
}

// 當地圖被點擊時，顯示填寫表單位置
map.on('click', function(e) {
    var px = map.latLngToContainerPoint(e.latlng);
    var formDiv = document.getElementById('formPopup');
    formDiv.style.left = px.x + 'px';
    formDiv.style.top = px.y + 'px';
    formDiv.style.display = 'block';
    // 填入隱藏欄位
    document.getElementById('lat').value = e.latlng.lat;
    document.getElementById('lng').value = e.latlng.lng;
});

// 表單提交處理
document.getElementById('markerForm').addEventListener('submit', function(evt) {
    evt.preventDefault();
    var form = evt.target;
    var formData = new FormData(form);
    fetch('/markers', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(m => {
        addMarkerToMap(m);
        document.getElementById('formPopup').style.display = 'none';
        form.reset();
    })
    .catch(err => {
        console.error('上傳失敗', err);
        alert('上傳失敗');
    });
});

// 取消按鈕
document.getElementById('cancelBtn').addEventListener('click', function() {
    document.getElementById('formPopup').style.display = 'none';
});
  
// 初次載入標記
loadMarkers();

static/css/style.css

css
複製程式碼
/* 可以加些簡單樣式 */

body {
  font-family: Arial, sans-serif;
}
#formPopup {
  z-index: 1000;
}

三、使用方式 &測試

1. 安裝必要套件

   bash
   複製程式碼
   pip install flask
   

2. 在專案目錄下執行

   bash
   複製程式碼
   python app.py
   

3. 打開瀏覽器到 http://127.0.0.1:5000/
   你會看到地圖，點擊地圖任一處會跳出表單讓你輸入文字與上傳圖片。提交後，該點會以標記出現，popup 裡會顯示文字與圖片。

4. 每次重啟 Flask 程式，之前的標記都會消失，因為這範本是存在記憶體（markers list）。在真實環境中，你要改成儲存在資料庫（例如 MySQL / PostgreSQL / SQLite / MongoDB），以便長期保存。

四、可擴充 / 加強建議

• 資料庫整合：將 markers 改為資料庫模型，儲存更多欄位（分類、使用者、時間戳、審核狀態等）

• 使用者認證與權限：讓某些人只能看、某些人可以新增 / 編輯 / 刪除

• 圖片檔案命名衝突 / 安全檢查

• 檔案大小限制 / 壓縮 / 縮圖

• 標記分類 / 分層：不同類型的標記可以用不同顏色或圖示顯示，並可勾選開關

• 標記搜尋 / 過濾 / 時間線功能

• 地圖底圖／圖磚服務：若大量使用者，可能要考慮自己快取圖磚、或使用 Mapbox / MapTiler / Tileserver 等

• 即時更新 / WebSocket：若多人同時操作，你可能要做 WebSocket 或 Server-Sent Events（SSE），讓其他使用者頁面即時看到新標記

• 安全性：檢查 XSS、上傳檔案驗證、不信任輸入等

如果你願意，我可以幫你把這個範本做成可部屬到雲端（像是 Heroku / AWS / GCP / Azure / Vercel）的版本，並提供完整原始碼給你，你要嗎？

好的，下面我把範本程式改寫一次，改成使用 SQLite 資料庫 儲存標記資料（包括文字、圖片路徑），這樣重啟程式後仍可讀取之前新增的資料。圖片實體檔案仍存在檔案系統裡（static/uploads/）或你指定的目錄。

我會給你完整的 app.py、資料表初始化、以及前端部分的調整。你可以把它接回之前那個範本專案目錄下。

一、安裝額外套件

這裡我們會用到 flask（已用過）與 sqlite3（Python 內建）。若你要用 ORM，也可以用 Flask‑SQLAlchemy，但我這裡先用原生的 sqlite3，比較直接明白。

bash
複製程式碼
pip install flask

二、資料庫 schema 與初始化

在專案目錄中，你可以新增一個檔案 schema.sql，內容如下：

sql
複製程式碼
-- schema.sql

DROP TABLE IF EXISTS markers;

CREATE TABLE markers (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    lat REAL NOT NULL,
    lng REAL NOT NULL,
    text TEXT,
    image_path TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

這個 schema 定義了一個 markers 表格，欄位有：

• id: 主鍵

• lat, lng: 標記的經緯度

• text: 使用者輸入的文字

• image_path: 圖檔在伺服器上的相對路徑或 URL（如 static/uploads/xxx.jpg）

• created_at: 建立時間

接著在 app.py 中，我們提供一個初始化資料庫的函式 init_db()，用來執行這個 schema。

三、修改後的 app.py

下面是完整改好的 app.py，你可以把之前的版本替換掉：

python
複製程式碼
import os
import sqlite3
from flask import Flask, render_template, request, jsonify, g
from werkzeug.utils import secure_filename

app = Flask(__name__)

# 設定上傳資料夾
UPLOAD_FOLDER = os.path.join(app.root_path, 'static', 'uploads')
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# 允許的圖片副檔名
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

# SQLite 資料庫檔案路徑（與這個 app.py 同層目錄下，檔案名稱 markers.db）
DATABASE = os.path.join(app.root_path, 'markers.db')


def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


def get_db():
    """
    取得目前 request 上下文下的資料庫連線，若還沒開，就開一個。
    """
    db = getattr(g, '_database', None)
    if db is None:
        # 連線時加上 row factory，讓 fetch 回來的是 dict 形式比較好用
        conn = sqlite3.connect(DATABASE)
        conn.row_factory = sqlite3.Row
        g._database = conn
    return g._database


@app.teardown_appcontext
def close_connection(exception):
    """
    在 request 結束後關閉資料庫連線（如果有開的話）
    """
    db = getattr(g, '_database', None)
    if db is not None:
        db.close()


def init_db():
    """
    用 schema.sql 初始化資料庫（建立表格）
    """
    db = get_db()
    with app.open_resource('schema.sql', mode='r') as f:
        db.cursor().executescript(f.read())
    db.commit()


@app.route('/initdb')
def initdb_route():
    """
    透過 HTTP 路徑來初始化資料庫（只用於開發時期）
    """
    init_db()
    return "Database initialized!"


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/markers', methods=['GET'])
def get_markers():
    db = get_db()
    cur = db.execute("SELECT id, lat, lng, text, image_path, created_at FROM markers")
    rows = cur.fetchall()
    # 轉為 list of dict
    markers = []
    for r in rows:
        markers.append({
            "id": r["id"],
            "lat": r["lat"],
            "lng": r["lng"],
            "text": r["text"],
            "image_url": r["image_path"],  # 這是相對路徑或 URL
            "created_at": r["created_at"]
        })
    return jsonify(markers)


@app.route('/markers', methods=['POST'])
def post_marker():
    lat = request.form.get('lat')
    lng = request.form.get('lng')
    text = request.form.get('text', "")
    file = request.files.get('image')

    if lat is None or lng is None:
        return jsonify({"error": "lat/lng missing"}), 400

    # 處理圖片上傳
    image_path = None
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        # 為避免檔名衝突，可以加上時間戳或 random 字串
        # 這裡簡單示範：
        name, ext = os.path.splitext(filename)
        filename = f"{name}_{int(sqlite3.time.time())}{ext}"
        savepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(savepath)
        # image_path 是供前端存取的相對 URL
        image_path = f"/static/uploads/{filename}"

    # 將資料寫入 SQLite
    db = get_db()
    cur = db.cursor()
    cur.execute(
        "INSERT INTO markers (lat, lng, text, image_path) VALUES (?, ?, ?, ?)",
        (float(lat), float(lng), text, image_path)
    )
    db.commit()
    marker_id = cur.lastrowid

    # 回傳剛新增的那筆資料
    new_marker = {
        "id": marker_id,
        "lat": float(lat),
        "lng": float(lng),
        "text": text,
        "image_url": image_path
    }
    return jsonify(new_marker), 201


if __name__ == '__main__':
    # 若 markers.db 不存在，啟動時可以自動初始化
    if not os.path.exists(DATABASE):
        with app.app_context():
            init_db()
    app.run(debug=True)

重點說明：

• get_db() 函式會檢查 g._database 是否已存在連線，若沒有，建立一條連線並設定 row_factory = sqlite3.Row，方便用 r["欄位名"] 存取欄位。這樣在 get_markers() 中就可以讀取那些欄位比較乾淨。

• teardown_appcontext 裝飾器會在每一次 request 完後自動關閉連線。這是 Flask 官網推薦的做法。 flask.palletsprojects.com

• 新增一條 route /initdb，方便在開發階段手動重建資料庫（清空 + 建表）。你可以在開發時打開瀏覽器去 http://localhost:5000/initdb，就會執行 schema.sql。

• 啟動 app.py 時，若 markers.db 不存在，會自動呼叫 init_db()，建立資料庫與表格。

• 圖片檔案仍是存在 static/uploads/，在資料庫中只記錄圖檔的相對 URL 或路徑 image_path。這是普遍做法：把大檔像圖片存檔案系統、資料庫只存路徑。這也跟許多教學一致。 geek-docs.com

• get_markers() 會把所有標記資料（包含圖片 URL）以 JSON 回傳給前端。

四、前端 (index.html / map.js) 的調整

其實幾乎不需要大幅改動。之前那個版本就可以繼續用，只要確保：

• 在 fetch('/markers') 那邊可以正確拿到 JSON（現在 JSON 裡每條記錄多了 id、created_at、image_url）

• 在 addMarkerToMap(m) 中，m.image_url 若為 null 或 None 要檢查，避免前端崩潰

這邊稍微給你修改版本的前端 JavaScript 片段（map.js）作為參考：

javascript
複製程式碼
function addMarkerToMap(m) {
    var marker = L.marker([m.lat, m.lng]).addTo(map);
    var popupHtml = `<div>${m.text || ""}</div>`;
    if (m.image_url) {
        popupHtml += `<div><img src="${m.image_url}" style="max-width:200px;"></div>`;
    }
    popupHtml += `<div style="font-size: 0.8em; color: #666;">ID: ${m.id}</div>`;
    marker.bindPopup(popupHtml);
}

其他部分（點擊地圖跳出表單、提交上傳）與先前版本相同即可。

五、測試流程

1. 把 schema.sql、改好的 app.py、舊的 templates/index.html 和 static/js/map.js、static/css/style.css 都放好。

2. 在終端／命令列執行：

   bash
   複製程式碼
   python app.py
   

3. 若第一次啟動，markers.db 檔案會被自動建立。你也可打 /initdb 強制重建（會清除舊資料）。

4. 用瀏覽器開啟 http://127.0.0.1:5000/，進行地圖點擊、上傳照片、填寫文字等操作。

5. 重啟程式（Ctrl+C 再 python app.py），地圖上之前標記應該依然存在，因為資料存在 markers.db，圖片檔案仍存在 static/uploads/。

六、注意事項與後續改進

• 圖片檔名衝突處理：我範本中用簡單方法在檔名前加上時間戳來避免衝突。你可以改進成 UUID、使用雜湊、或加入使用者 ID 等來更穩妥。

• 安全性檢查：檔案類型、檔案大小要限制；避免惡意上傳。

• 圖片儲存空間管理：若檔案很多，可能要考慮刪除舊照片、做壓縮、或存到雲端物件儲存（如 S3）。

• 索引與查詢效率：若資料很多，SQL 查詢可能慢，未來可能要加入索引（例如在 lat,lng 欄位上做地理索引或使用地理資料庫）。

• 權限管理 / 審核機制：讓部分用戶只能查看、不能上傳、或上傳後需審核才能顯示。

• 同時使用者同步：若多人同時上傳標記，前端可能要做 自動重載 或用 WebSocket / SSE 來即時更新其他使用者看到的標記。

• 備份與資料遷移：若未來要從 SQLite 換成 MySQL / PostgreSQL，要有資料遷移計畫。

如果你願意，我也可以幫你把這個範本打包成一個 GitHub 專案、並幫你部署到某個雲端（如 Heroku、Render、Vercel、或自己 VPS）讓你可以直接測試。要嗎？

很好，這是個常見且有用的需求——在一個已存在的 Marker 上「追加／編輯」文字與照片，以便追蹤歷史與進度。下面我提供一個設計方向與程式碼範例，展示如何讓使用者對既有標記進行更新、並在資料庫中保留歷史紀錄。

一、設計思路

我們要把標記（marker）當成一個物件，每個物件除了最初的「建立」資料外，還可以有一個或多個「更新紀錄」：

• 主表 markers：存放標記的基本資料（經緯度、建立時間、目前文字／圖片或最初版本）

• 更新表 marker_updates（或稱歷史紀錄表）：記錄對該標記每次的更新（時間、文字、照片、更新者等）

• 或者把 markers 表設計為允許多張照片、多條文字（儲存在 JSON 或另一個子表）

選這兩種設計之一：

我建議用「子表」方式，也就是：

• markers：主表，保留不變的資訊（如經緯度）、以及最新的狀態（或不保最新狀態，僅用 updates 查最新）

• marker_updates：每次使用者對該 marker 做的變更（一筆或多筆），包含文字、圖片路徑、時間戳、操作人員等

這樣就能做到「從已存在的 marker 上新增文字或圖片」的功能，同時保留歷史紀錄。

二、更新資料庫 schema

假設我們現在的主表 markers 已經有：

sql
複製程式碼
CREATE TABLE markers (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    lat REAL NOT NULL,
    lng REAL NOT NULL,
    text TEXT,
    image_path TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

我們可以新增一張更新紀錄表：

sql
複製程式碼
CREATE TABLE marker_updates (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    marker_id INTEGER NOT NULL,
    text TEXT,
    image_path TEXT,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (marker_id) REFERENCES markers(id)
);

• marker_id 是外鍵，指出這筆更新屬於哪個 marker

• text, image_path: 這次更新新增的文字與圖片（可為空）

• updated_at: 更新時間

此外，你可以改動主表 markers 的 text 與 image_path 欄位用途：可以保最新狀態，也可以只保最初狀態、讓更新紀錄表去讀取最新狀態。

三、後端 API 設計範例（Flask + SQLite 為例）

下面我在你原本那個 app.py 基礎上，展示如何加上「更新 marker」的 route。假設你已經有 markers 主表，且你已新增了 marker_updates 表。

app.py（新增的部分）

python
複製程式碼
# 假設已有 get_db()、init_db()、markers 表的設計如前

@app.route('/markers/<int:marker_id>/updates', methods=['POST'])
def post_marker_update(marker_id):
    """
    對已存在的 marker（透過 id）做一次更新：可加文字、可加照片（或兩者皆有）。
    """
    # 先檢查這個 marker 是否存在
    db = get_db()
    cur = db.execute("SELECT id FROM markers WHERE id = ?", (marker_id,))
    row = cur.fetchone()
    if row is None:
        return jsonify({"error": "marker not found"}), 404

    text = request.form.get('text', None)
    file = request.files.get('image')

    image_path = None
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        name, ext = os.path.splitext(filename)
        filename = f"{name}_{int(sqlite3.time.time())}{ext}"  # 或用 uuid
        savepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(savepath)
        image_path = f"/static/uploads/{filename}"

    # 如果既沒文字也沒圖片，這次更新無效
    if (text is None or text.strip() == "") and image_path is None:
        return jsonify({"error": "nothing to update"}), 400

    # 寫入 updates 表
    cur2 = db.cursor()
    cur2.execute(
        "INSERT INTO marker_updates (marker_id, text, image_path) VALUES (?, ?, ?)",
        (marker_id, text, image_path)
    )
    db.commit()
    new_id = cur2.lastrowid

    return jsonify({
        "update_id": new_id,
        "marker_id": marker_id,
        "text": text,
        "image_url": image_path,
    }), 201


@app.route('/markers/<int:marker_id>/updates', methods=['GET'])
def get_marker_updates(marker_id):
    """
    取得某個 marker 的所有更新歷史
    """
    db = get_db()
    # 確保 marker 存在
    cur = db.execute("SELECT id FROM markers WHERE id = ?", (marker_id,))
    if cur.fetchone() is None:
        return jsonify({"error": "marker not found"}), 404

    cur2 = db.execute(
        "SELECT id, text, image_path, updated_at FROM marker_updates WHERE marker_id = ? ORDER BY updated_at ASC",
        (marker_id,)
    )
    rows = cur2.fetchall()
    updates = []
    for r in rows:
        updates.append({
            "update_id": r["id"],
            "text": r["text"],
            "image_url": r["image_path"],
            "updated_at": r["updated_at"]
        })
    return jsonify(updates)

修改 init_db() 要加入 marker_updates 表格的建表語句

在你的 schema.sql 中（或直接在初始化程式碼裡）加入：

sql
複製程式碼
-- existing markers table
DROP TABLE IF EXISTS marker_updates;

CREATE TABLE marker_updates (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    marker_id INTEGER NOT NULL,
    text TEXT,
    image_path TEXT,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY(marker_id) REFERENCES markers(id)
);

或是在 Python 的 init_db() 裡也加上這段 SQL。

四、前端設計（修改某個 marker 的更新）

在前端，你要為每一個標記（marker）提供一個「編輯 / 更新」入口（按鈕或鏈結），點了之後可以彈出對話框讓使用者輸入新文字、上傳新圖片。然後把資料送到新的 API /markers/{id}/updates。

在標記的 popup（或側邊面板）中，你可以顯示該 marker 的更新歷史（呼叫 GET /markers/{id}/updates），例如：

javascript
複製程式碼
function showUpdateForm(marker, markerData) {
    // markerData 有 marker 的基本資料（如 id, lat, lng, text, image_url）
    // 建立一個表單或 UI 讓使用者新增更新
    // 例如：
    var formHtml = `
      <div>
        <textarea id="upd_text"> </textarea>
      </div>
      <div>
        <input type="file" id="upd_image" accept="image/*">
      </div>
      <div>
        <button id="upd_submit">提交更新</button>
      </div>
      <div id="upd_history"></div>
    `;
    marker.bindPopup(formHtml).openPopup();

    // 取得歷史更新
    fetch(`/markers/${markerData.id}/updates`)
      .then(res => res.json())
      .then(upds => {
        var histDiv = document.getElementById('upd_history');
        histDiv.innerHTML = "<h4>更新歷史：</h4>";
        upds.forEach(u => {
          var entry = `<div>
            <div>${u.updated_at}</div>
            <div>${u.text || ""}</div>
            ${u.image_url ? `<div><img src="${u.image_url}" style="max-width:150px;"></div>` : ""}
          </div><hr>`;
          histDiv.innerHTML += entry;
        });
      });

    document.getElementById('upd_submit').addEventListener('click', function() {
      var formData = new FormData();
      var newText = document.getElementById('upd_text').value;
      var newImage = document.getElementById('upd_image').files[0];
      formData.append('text', newText);
      if (newImage) {
        formData.append('image', newImage);
      }
      fetch(`/markers/${markerData.id}/updates`, {
        method: 'POST',
        body: formData
      })
      .then(res => res.json())
      .then(ret => {
        alert("更新成功");
        marker.closePopup();
        // 你可以選擇重新載入該 marker 的 popup 或整張地圖
      });
    });
}

你可以在 addMarkerToMap(m) 之類的函式裡附加一個「更新」按鈕或在 popup 底下放一個「更新」連結，呼叫上面 showUpdateForm()。

五、總結

• 你需要修改資料庫結構，新增一張 marker_updates 子表來保存更新歷史

• 在後端新增兩個 API：POST /markers/{id}/updates（提交更新）與 GET /markers/{id}/updates（取得歷史）

• 前端在已有 marker 的 popup 或 UI 中提供更新入口，讓使用者能提交新的文字與圖片

• 前端可同時顯示該 marker 的更新歷史，使指揮者或使用者可以追蹤進度與改變

如果你願意的話，我可以幫你把完整的範本（Flask + SQLite + 編輯更新功能）打包給你，讓你直接測試。要嗎？

好的，下面是完整的範本專案（Flask + SQLite + 編輯 / 更新 功能）。你可以把這些檔案全部放在一個資料夾裡，跑起來就可以試看看。

一、專案目錄結構

假設專案叫做 flask_marker_history，目錄結構如下：

pgsql
複製程式碼
flask_marker_history/
│
├── app.py
├── schema.sql
├── templates/
│   └── index.html
└── static/
    ├── uploads/        ← 圖片上傳儲存資料夾
    ├── css/
    │    └── style.css
    └── js/
         └── map.js

注意：static/uploads/ 資料夾要建立好給上傳圖片用。

二、檔案內容

下面是每個檔案的內容。

schema.sql

sql
複製程式碼
-- schema.sql

DROP TABLE IF EXISTS marker_updates;
DROP TABLE IF EXISTS markers;

CREATE TABLE markers (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    lat REAL NOT NULL,
    lng REAL NOT NULL,
    text TEXT,
    image_path TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE marker_updates (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    marker_id INTEGER NOT NULL,
    text TEXT,
    image_path TEXT,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY(marker_id) REFERENCES markers(id)
);

app.py

python
複製程式碼
import os
import sqlite3
from flask import Flask, render_template, request, jsonify, g
from werkzeug.utils import secure_filename

app = Flask(__name__)

# 上傳圖片的資料夾
UPLOAD_FOLDER = os.path.join(app.root_path, 'static', 'uploads')
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

# 資料庫檔案（在專案根目錄下）
DATABASE = os.path.join(app.root_path, 'markers.db')


def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


def get_db():
    db = getattr(g, '_database', None)
    if db is None:
        conn = sqlite3.connect(DATABASE)
        conn.row_factory = sqlite3.Row
        g._database = conn
    return g._database


@app.teardown_appcontext
def close_connection(exception):
    db = getattr(g, '_database', None)
    if db is not None:
        db.close()


def init_db():
    db = get_db()
    with app.open_resource('schema.sql', mode='r') as f:
        db.cursor().executescript(f.read())
    db.commit()


@app.route('/initdb')
def initdb_route():
    init_db()
    return "Database initialized!"


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/markers', methods=['GET'])
def get_markers():
    db = get_db()
    cur = db.execute("SELECT id, lat, lng, text, image_path, created_at FROM markers")
    rows = cur.fetchall()
    out = []
    for r in rows:
        out.append({
            "id": r["id"],
            "lat": r["lat"],
            "lng": r["lng"],
            "text": r["text"],
            "image_url": r["image_path"],
            "created_at": r["created_at"]
        })
    return jsonify(out)


@app.route('/markers', methods=['POST'])
def post_marker():
    lat = request.form.get('lat')
    lng = request.form.get('lng')
    text = request.form.get('text', "")
    file = request.files.get('image')

    if lat is None or lng is None:
        return jsonify({"error": "lat or lng missing"}), 400

    image_path = None
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        name, ext = os.path.splitext(filename)
        # 可加 timestamp 或 uuid 避免衝突
        filename = f"{name}_{int(sqlite3.time.time())}{ext}"
        savepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(savepath)
        image_path = f"/static/uploads/{filename}"

    db = get_db()
    cur = db.cursor()
    cur.execute(
        "INSERT INTO markers (lat, lng, text, image_path) VALUES (?, ?, ?, ?)",
        (float(lat), float(lng), text, image_path)
    )
    db.commit()
    new_id = cur.lastrowid

    return jsonify({
        "id": new_id,
        "lat": float(lat),
        "lng": float(lng),
        "text": text,
        "image_url": image_path
    }), 201


@app.route('/markers/<int:marker_id>/updates', methods=['POST'])
def post_marker_update(marker_id):
    # 檢查該 marker 是否存在
    db = get_db()
    cur = db.execute("SELECT id FROM markers WHERE id = ?", (marker_id,))
    if cur.fetchone() is None:
        return jsonify({"error": "marker not found"}), 404

    text = request.form.get('text', None)
    file = request.files.get('image')

    image_path = None
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        name, ext = os.path.splitext(filename)
        filename = f"{name}_{int(sqlite3.time.time())}{ext}"
        savepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(savepath)
        image_path = f"/static/uploads/{filename}"

    # 若文字與圖片皆無，視為無效更新
    if (text is None or text.strip() == "") and image_path is None:
        return jsonify({"error": "nothing to update"}), 400

    cur2 = db.cursor()
    cur2.execute(
        "INSERT INTO marker_updates (marker_id, text, image_path) VALUES (?, ?, ?)",
        (marker_id, text, image_path)
    )
    db.commit()
    new_upd_id = cur2.lastrowid

    return jsonify({
        "update_id": new_upd_id,
        "marker_id": marker_id,
        "text": text,
        "image_url": image_path
    }), 201


@app.route('/markers/<int:marker_id>/updates', methods=['GET'])
def get_marker_updates(marker_id):
    db = get_db()
    cur = db.execute("SELECT id FROM markers WHERE id = ?", (marker_id,))
    if cur.fetchone() is None:
        return jsonify({"error": "marker not found"}), 404

    cur2 = db.execute(
        "SELECT id, text, image_path, updated_at FROM marker_updates WHERE marker_id = ? ORDER BY updated_at ASC",
        (marker_id,)
    )
    rows = cur2.fetchall()
    out = []
    for r in rows:
        out.append({
            "update_id": r["id"],
            "text": r["text"],
            "image_url": r["image_path"],
            "updated_at": r["updated_at"]
        })
    return jsonify(out)


if __name__ == '__main__':
    # 若資料庫不存在，啟動時建立
    if not os.path.exists(DATABASE):
        with app.app_context():
            init_db()
    app.run(debug=True)

templates/index.html

html
複製程式碼
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>災情地圖＋更新範本</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha512‑…" crossorigin=""/>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
  <h2>災情地圖（點擊地圖新增標記；點標記可新增更新）</h2>
  <div id="map" style="height: 600px;"></div>

  <!-- 新增標記用的表單 -->
  <div id="formPopup" style="display: none; position: absolute; background: white; padding: 10px; border: 1px solid #666;">
    <form id="markerForm">
      <input type="hidden" id="lat" name="lat">
      <input type="hidden" id="lng" name="lng">
      <div>
        <label>文字描述：</label><br>
        <textarea name="text" id="text" rows="3" cols="30"></textarea>
      </div>
      <div>
        <label>上傳圖片：</label>
        <input type="file" name="image" id="imageFile" accept="image/*">
      </div>
      <div style="margin-top: 5px;">
        <button type="submit">送出</button>
        <button type="button" id="cancelBtn">取消</button>
      </div>
    </form>
  </div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha512‑…" crossorigin=""></script>
  <script src="{{ url_for('static', filename='js/map.js') }}"></script>
</body>
</html>

static/js/map.js

javascript
複製程式碼
var map = L.map('map').setView([23.5, 121.5], 8);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 載入所有現有標記
function loadMarkers() {
  fetch('/markers')
    .then(res => res.json())
    .then(data => {
      data.forEach(m => {
        addMarkerToMap(m);
      });
    });
}

// 把單個 marker 加到地圖上
function addMarkerToMap(m) {
  var marker = L.marker([m.lat, m.lng]).addTo(map);
  var popupHtml = `<div>${m.text || ""}</div>`;
  if (m.image_url) {
    popupHtml += `<div><img src="${m.image_url}" style="max-width:200px;"></div>`;
  }
  popupHtml += `<div><button onclick="openUpdateForm(${m.id})">新增 / 查看更新</button></div>`;
  marker.bindPopup(popupHtml);
}

// 當地圖被點擊時，用來新增 marker
map.on('click', function(e) {
  var px = map.latLngToContainerPoint(e.latlng);
  var formDiv = document.getElementById('formPopup');
  formDiv.style.left = px.x + 'px';
  formDiv.style.top = px.y + 'px';
  formDiv.style.display = 'block';
  document.getElementById('lat').value = e.latlng.lat;
  document.getElementById('lng').value = e.latlng.lng;
});

// 提交新 marker 表單
document.getElementById('markerForm').addEventListener('submit', function(evt) {
  evt.preventDefault();
  var form = evt.target;
  var formData = new FormData(form);
  fetch('/markers', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(m => {
    addMarkerToMap(m);
    document.getElementById('formPopup').style.display = 'none';
    form.reset();
  })
  .catch(err => {
    console.error('上傳失敗', err);
    alert('上傳失敗');
  });
});

// 取消按鈕
document.getElementById('cancelBtn').addEventListener('click', function() {
  document.getElementById('formPopup').style.display = 'none';
});


// 顯示更新 / 編輯表單（在 popup 或新視窗中）
window.openUpdateForm = function(markerId) {
  // 取得該 marker 的詳細資料與更新歷史
  // 顯示一個簡單的對話框（使用 prompt / 自己做 UI 也可）
  // 這裡簡單做一個 prompt + file input 是難做的，我改為彈出一個自訂 overlay

  // 創建 overlay div
  var overlay = document.createElement('div');
  overlay.style.position = 'fixed';
  overlay.style.left = '0'; overlay.style.top = '0';
  overlay.style.width = '100%'; overlay.style.height = '100%';
  overlay.style.background = 'rgba(0,0,0,0.5)';
  overlay.style.zIndex = '10000';

  var box = document.createElement('div');
  box.style.background = 'white';
  box.style.margin = '50px';
  box.style.padding = '20px';
  box.style.maxHeight = '80%';
  box.style.overflow = 'auto';

  box.innerHTML = `
    <h3>更新記錄 / 新增更新</h3>
    <div id="hist"></div>
    <hr>
    <div>
      <textarea id="upd_text" placeholder="輸入描述文字" rows="3" cols="40"></textarea>
    </div>
    <div>
      <input type="file" id="upd_image" accept="image/*">
    </div>
    <div style="margin-top: 10px;">
      <button id="upd_submit">送出更新</button>
      <button id="upd_cancel">取消</button>
    </div>
  `;

  overlay.appendChild(box);
  document.body.appendChild(overlay);

  // 取得更新歷史
  fetch(`/markers/${markerId}/updates`)
    .then(res => res.json())
    .then(upds => {
      var histDiv = box.querySelector('#hist');
      histDiv.innerHTML = `<h4>歷史更新：</h4>`;
      upds.forEach(u => {
        var e = `<div>
          <div style="font-size:0.9em; color:#444;">${u.updated_at}</div>
          <div>${u.text || ""}</div>
          ${u.image_url ? `<div><img src="${u.image_url}" style="max-width:200px;"></div>` : ""}
          <hr>
        </div>`;
        histDiv.innerHTML += e;
      });
    });

  box.querySelector('#upd_cancel').addEventListener('click', function(){
    document.body.removeChild(overlay);
  });

  box.querySelector('#upd_submit').addEventListener('click', function(){
    var newText = box.querySelector('#upd_text').value;
    var newImage = box.querySelector('#upd_image').files[0];
    var fd = new FormData();
    fd.append('text', newText);
    if (newImage) {
      fd.append('image', newImage);
    }
    fetch(`/markers/${markerId}/updates`, {
      method: 'POST',
      body: fd
    })
    .then(res => res.json())
    .then(ret => {
      alert('更新成功');
      document.body.removeChild(overlay);
      // 重新載入整個地圖標記（簡單方法）：
      // 清掉地圖再 loadMarkers
      map.eachLayer(function (layer) {
        if (layer instanceof L.Marker) {
          map.removeLayer(layer);
        }
      });
      loadMarkers();
    })
    .catch(err => {
      console.error('更新失敗', err);
      alert('更新失敗');
    });
  });
};

// 頁面載入時先載入標記
loadMarkers();

static/css/style.css

css
複製程式碼
body {
  font-family: Arial, sans-serif;
}

#formPopup {
  z-index: 1000;
  background: white;
}

三、執行與測試

1. 在專案資料夾下 pip install flask

2. 確定資料夾結構正確，並且 static/uploads/ 存在

3. 執行

   bash
   複製程式碼
   python app.py
   

4. 如果是第一次執行，markers.db 檔案會被創建，並由 init_db() 建表

5. 開瀏覽器連到 http://127.0.0.1:5000/

6. 點地圖可新增標記（文字 + 圖片）

7. 點標記的 “新增 / 查看更新” 按鈕可以打開更新介面：可以看到該標記的歷史更新、並新增新的文字或圖片更新

8. 更新成功之後，overlay 關閉，地圖會重新載入標記以顯示更新後的內容

如果你願意，我可以幫你把這整個範本專案放到 GitHub，給你一個 URL 下載，也可以幫你協助部署到雲端伺服器。要嗎？

沒問題，我來幫你把範本改進，使得「舊的資訊也會保留並顯示」更完整：也就是說，對一個 marker 的初始描述 + 圖片，以及所有後續的更新紀錄，都要在畫面上可見。以下我會提供更新後的範本重點，讓你可以整合進剛剛那個專案。

一、設計重點回顧

• 主表 markers 儲存最初的描述與圖片

• 更新表 marker_updates 儲存後續每次更新（文字 + 圖片 + 時間）

• 當載入一個 marker 時，要把主表資料當作「第一筆記錄」與更新表的所有歷史併列顯示

• 畫面上：在 marker 的 popup 或 overlay 要有一欄給 歷史紀錄，按時間順序顯示：最初 + 每次更新

二、後端要調整的地方

後端基本部分其實差不多已經有了，我們要稍微修改 get_markers 或前端整合時，讓前端拿到足夠資料，以顯示整個歷史。

例如，我們可以在 GET /markers 這個端點，讓它在回傳每個 marker 時，同時回傳其更新歷史（可用內部 join 或另外查一次）。或者不改 GET /markers，前端在使用者點 marker 時，再 call GET /markers/{id}/updates 取得更新歷史。

以下示範後者：主資料與更新資料分開取得，然後前端合併顯示。

三、前端修改（顯示全部舊 + 新資訊）

在 map.js 裡，我們要改動 addMarkerToMap(m) 使得在 popup 或 overlay 中，不只是顯示主表資料，還會顯示更新歷史。

以下是修改後的前端思路與範例：

javascript
複製程式碼
function addMarkerToMap(m) {
  var marker = L.marker([m.lat, m.lng]).addTo(map);

  // popup content，先塞主表資料 + 一個按鈕啟動「查看 / 新增更新」
  var popupHtml = `<div>
      <strong>初始描述：</strong><br>
      ${m.text || ""}<br>`;
  if (m.image_url) {
    popupHtml += `<div><img src="${m.image_url}" style="max-width:200px;"></div>`;
  }
  popupHtml += `<hr>
      <div><button onclick="openUpdateForm(${m.id}, ${m.lat}, ${m.lng})">查看 / 新增更新</button></div>
    </div>`;

  marker.bindPopup(popupHtml);
}

注意：openUpdateForm 我這次要改讓它帶入 marker.id, lat, lng，方便前端知道要在哪個位置打 UI。接下來是 openUpdateForm 的修改版本：

javascript
複製程式碼
window.openUpdateForm = function(markerId, lat, lng) {
  // 建 overlay / box 如之前版本
  // ...

  // 先把主資料也拿來顯示（可 call後端的 /markers 來取得主表那筆，或在前端已有 m 為主表資料時傳進來）
  // 假設前面已有 main data（m）可供使用，我們可以在 openUpdateForm 參數中也傳進該 marker 的 main text/image

  // 取得更新歷史
  fetch(`/markers/${markerId}/updates`)
    .then(res => res.json())
    .then(upds => {
      var histDiv = box.querySelector('#hist');
      histDiv.innerHTML = `<h4>歷史紀錄：</h4>`;
      // 顯示「初始描述」
      histDiv.innerHTML += `<div>
          <div style="font-weight:bold;">（初始）</div>
          <div>${m.text || ""}</div>
          ${m.image_url ? `<div><img src="${m.image_url}" style="max-width:200px;"></div>` : ""}
          <hr>
      </div>`;

      // 接著顯示每個更新
      upds.forEach(u => {
        var e = `<div>
          <div style="font-size:0.9em; color:#444;">${u.updated_at}</div>
          <div>${u.text || ""}</div>
          ${u.image_url ? `<div><img src="${u.image_url}" style="max-width:200px;"></div>` : ""}
          <hr>
        </div>`;
        histDiv.innerHTML += e;
      });
    });

  // …其餘提交更新等邏輯同前
};

注意：上述範例裡面 m.text、m.image_url 需要在呼叫 openUpdateForm 時從 addMarkerToMap 內部那個 m 傳入。為此你可以改 openUpdateForm(markerId, m)，把整個物件傳進去，而不是單純幾個參數。

舉例把 addMarkerToMap(m) 改為：

javascript
複製程式碼
marker.bindPopup(
  `<div>... <button onclick='openUpdateForm(${m.id}, ${JSON.stringify(m)})'>查看 / 新增更新</button></div>`
);

或用閉包 (closure) 綁定事件比較乾淨，避免在 HTML 字串中直接呼叫：

javascript
複製程式碼
marker.on('click', function() {
  openUpdateOverlay(m);
});

這樣 openUpdateOverlay(m) 裡 m 是原本的資料物件，裡面有 m.text, m.image_url。接著 overlay 裡就可以把主表 + 更新紀錄一起顯示。

最後，在提交更新成功後，你要重整該 marker 的顯示 popup 或重載整體地圖的 markers，以反映新更新。

四、小結

• 已經用子表 marker_updates 記錄歷史更新

• 前端在 popup / overlay 裡要把主表資料 (text + image) 當成「初始紀錄」展示

• 再把更新紀錄一筆一筆依時間列出

• 更新成功後重新載入該 marker 或整張地圖，以顯示最新 + 所有歷史資訊

如果你願意的話，我可以幫你把剛剛那個完整範本再次整合這些修改，然後把修正後的完整專案給你。要嗎？

下面是修正後可完整運作的專案範本，已經整合「主表 + 更新歷史並全數顯示」功能。你可以把它複製到你的機器上，測試、修改、延伸。

一、專案目錄結構

pgsql
複製程式碼
flask_marker_with_history/
│
├── app.py
├── schema.sql
├── templates/
│   └── index.html
└── static/
    ├── uploads/        ← 圖片上傳儲存資料夾（要建立）
    ├── css/
    │    └── style.css
    └── js/
         └── map.js

確保 static/uploads/ 資料夾存在，讓圖片能寫入。

二、檔案內容

schema.sql

sql
複製程式碼
-- schema.sql

DROP TABLE IF EXISTS marker_updates;
DROP TABLE IF EXISTS markers;

CREATE TABLE markers (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    lat REAL NOT NULL,
    lng REAL NOT NULL,
    text TEXT,
    image_path TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE marker_updates (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    marker_id INTEGER NOT NULL,
    text TEXT,
    image_path TEXT,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY(marker_id) REFERENCES markers(id)
);

app.py

python
複製程式碼
import os
import sqlite3
from flask import Flask, render_template, request, jsonify, g
from werkzeug.utils import secure_filename

app = Flask(__name__)

# 圖片上傳資料夾
UPLOAD_FOLDER = os.path.join(app.root_path, 'static', 'uploads')
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

# 資料庫檔案路徑
DATABASE = os.path.join(app.root_path, 'markers.db')


def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS


def get_db():
    db = getattr(g, '_database', None)
    if db is None:
        conn = sqlite3.connect(DATABASE)
        conn.row_factory = sqlite3.Row
        g._database = conn
    return g._database


@app.teardown_appcontext
def close_connection(exception):
    db = getattr(g, '_database', None)
    if db is not None:
        db.close()


def init_db():
    db = get_db()
    with app.open_resource('schema.sql', mode='r') as f:
        db.cursor().executescript(f.read())
    db.commit()


@app.route('/initdb')
def initdb_route():
    init_db()
    return "Database initialized!"


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/markers', methods=['GET'])
def get_markers():
    db = get_db()
    cur = db.execute("SELECT id, lat, lng, text, image_path, created_at FROM markers")
    rows = cur.fetchall()
    out = []
    for r in rows:
        out.append({
            "id": r["id"],
            "lat": r["lat"],
            "lng": r["lng"],
            "text": r["text"],
            "image_url": r["image_path"],
            "created_at": r["created_at"]
        })
    return jsonify(out)


@app.route('/markers', methods=['POST'])
def post_marker():
    lat = request.form.get('lat')
    lng = request.form.get('lng')
    text = request.form.get('text', "")
    file = request.files.get('image')

    if lat is None or lng is None:
        return jsonify({"error": "lat or lng missing"}), 400

    image_path = None
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        name, ext = os.path.splitext(filename)
        # 為避免檔名衝突，加入時間戳
        filename = f"{name}_{int(sqlite3.time.time())}{ext}"
        savepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(savepath)
        image_path = f"/static/uploads/{filename}"

    db = get_db()
    cur = db.cursor()
    cur.execute(
        "INSERT INTO markers (lat, lng, text, image_path) VALUES (?, ?, ?, ?)",
        (float(lat), float(lng), text, image_path)
    )
    db.commit()
    new_id = cur.lastrowid

    return jsonify({
        "id": new_id,
        "lat": float(lat),
        "lng": float(lng),
        "text": text,
        "image_url": image_path
    }), 201


@app.route('/markers/<int:marker_id>/updates', methods=['POST'])
def post_marker_update(marker_id):
    db = get_db()
    cur = db.execute("SELECT id, text, image_path FROM markers WHERE id = ?", (marker_id,))
    base = cur.fetchone()
    if base is None:
        return jsonify({"error": "marker not found"}), 404

    text = request.form.get('text', None)
    file = request.files.get('image')

    image_path = None
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        name, ext = os.path.splitext(filename)
        filename = f"{name}_{int(sqlite3.time.time())}{ext}"
        savepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(savepath)
        image_path = f"/static/uploads/{filename}"

    # 若都沒更新內容
    if (text is None or text.strip() == "") and image_path is None:
        return jsonify({"error": "nothing to update"}), 400

    cur2 = db.cursor()
    cur2.execute(
        "INSERT INTO marker_updates (marker_id, text, image_path) VALUES (?, ?, ?)",
        (marker_id, text, image_path)
    )
    db.commit()
    new_upd_id = cur2.lastrowid

    return jsonify({
        "update_id": new_upd_id,
        "marker_id": marker_id,
        "text": text,
        "image_url": image_path
    }), 201


@app.route('/markers/<int:marker_id>/updates', methods=['GET'])
def get_marker_updates(marker_id):
    db = get_db()
    cur = db.execute("SELECT id, text, image_path, updated_at FROM marker_updates WHERE marker_id = ? ORDER BY updated_at ASC",
                     (marker_id,))
    rows = cur.fetchall()
    out = []
    for r in rows:
        out.append({
            "update_id": r["id"],
            "text": r["text"],
            "image_url": r["image_path"],
            "updated_at": r["updated_at"]
        })
    return jsonify(out)


if __name__ == '__main__':
    if not os.path.exists(DATABASE):
        with app.app_context():
            init_db()
    app.run(debug=True)

templates/index.html

html
複製程式碼
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>災情地圖 + 歷史更新範本</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha512‑…" crossorigin=""/>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
  <h2>災情地圖（可新增標記、點標記查看 / 新增更新）</h2>
  <div id="map" style="height: 600px;"></div>

  <!-- 新增標記用表單 -->
  <div id="formPopup" style="display: none; position: absolute; background: white; padding: 10px; border: 1px solid #666;">
    <form id="markerForm">
      <input type="hidden" id="lat" name="lat">
      <input type="hidden" id="lng" name="lng">
      <div>
        <label>文字描述：</label><br>
        <textarea name="text" id="text" rows="3" cols="30"></textarea>
      </div>
      <div>
        <label>上傳圖片：</label>
        <input type="file" name="image" id="imageFile" accept="image/*">
      </div>
      <div style="margin-top: 5px;">
        <button type="submit">送出</button>
        <button type="button" id="cancelBtn">取消</button>
      </div>
    </form>
  </div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha512‑…" crossorigin=""></script>
  <script src="{{ url_for('static', filename='js/map.js') }}"></script>
</body>
</html>

static/js/map.js

javascript
複製程式碼
var map = L.map('map').setView([23.5, 121.5], 8);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 載入所有 marker
function loadMarkers() {
  fetch('/markers')
    .then(res => res.json())
    .then(data => {
      data.forEach(m => {
        addMarkerToMap(m);
      });
    });
}

// 加入 marker 並綁定點擊展開 popup / 更新功能
function addMarkerToMap(m) {
  var marker = L.marker([m.lat, m.lng]).addTo(map);

  // 在 click 時動作，而不是直接在 popup HTML 呼叫 openUpdateForm
  marker.on('click', function() {
    openUpdateOverlay(m);
  });

  // 初始 popup 可顯示基本資料 + 提示可以點擊查看更新
  var popupHtml = `<div>
      <strong>初始描述：</strong><br>
      ${m.text || ""}<br>
  `;
  if (m.image_url) {
    popupHtml += `<div><img src="${m.image_url}" style="max-width:200px;"></div>`;
  }
  popupHtml += `<hr><div style="font-size:0.9em; color:#555;">(點此標記可查看 / 新增更新)</div></div>`;
  marker.bindPopup(popupHtml);
}

// 點 marker 時開 overlay 顯示歷史 + 更新表單
function openUpdateOverlay(m) {
  // 建 overlay
  var overlay = document.createElement('div');
  overlay.style.position = 'fixed';
  overlay.style.left = '0'; overlay.style.top = '0';
  overlay.style.width = '100%'; overlay.style.height = '100%';
  overlay.style.background = 'rgba(0,0,0,0.5)';
  overlay.style.zIndex = '10000';

  var box = document.createElement('div');
  box.style.background = 'white';
  box.style.margin = '50px auto';
  box.style.padding = '20px';
  box.style.maxHeight = '80%';
  box.style.overflow = 'auto';
  box.style.width = '400px';

  box.innerHTML = `
    <h3>標記更新 / 歷史紀錄</h3>
    <div id="hist"></div>
    <hr>
    <div>
      <textarea id="upd_text" placeholder="輸入描述" rows="3" cols="40"></textarea>
    </div>
    <div>
      <input type="file" id="upd_image" accept="image/*">
    </div>
    <div style="margin-top: 10px;">
      <button id="upd_submit">送出更新</button>
      <button id="upd_cancel">取消</button>
    </div>
  `;

  overlay.appendChild(box);
  document.body.appendChild(overlay);

  // 顯示初始資料 + 歷史更新
  var histDiv = box.querySelector('#hist');
  histDiv.innerHTML = `<h4>歷史紀錄：</h4>`;
  // 初始描述
  histDiv.innerHTML += `<div>
      <div style="font-weight:bold;">（初始）</div>
      <div>${m.text || ""}</div>
      ${m.image_url ? `<div><img src="${m.image_url}" style="max-width:200px;"></div>` : ""}
      <hr>
  </div>`;

  // 取得其他更新
  fetch(`/markers/${m.id}/updates`)
    .then(res => res.json())
    .then(upds => {
      upds.forEach(u => {
        var e = `<div>
          <div style="font-size:0.9em; color:#444;">${u.updated_at}</div>
          <div>${u.text || ""}</div>
          ${u.image_url ? `<div><img src="${u.image_url}" style="max-width:200px;"></div>` : ""}
          <hr>
        </div>`;
        histDiv.innerHTML += e;
      });
    });

  box.querySelector('#upd_cancel').addEventListener('click', function(){
    document.body.removeChild(overlay);
  });

  box.querySelector('#upd_submit').addEventListener('click', function(){
    var newText = box.querySelector('#upd_text').value;
    var newImage = box.querySelector('#upd_image').files[0];
    var fd = new FormData();
    fd.append('text', newText);
    if (newImage) {
      fd.append('image', newImage);
    }
    fetch(`/markers/${m.id}/updates`, {
      method: 'POST',
      body: fd
    })
    .then(res => res.json())
    .then(ret => {
      alert('更新成功');
      document.body.removeChild(overlay);
      // 重新載入整個地圖標記（簡單做法）
      map.eachLayer(function (layer) {
        if (layer instanceof L.Marker) {
          map.removeLayer(layer);
        }
      });
      loadMarkers();
    })
    .catch(err => {
      console.error('更新失敗', err);
      alert('更新失敗');
    });
  });
}

// 新增標記表單顯示 / 提交
map.on('click', function(e) {
  var px = map.latLngToContainerPoint(e.latlng);
  var formDiv = document.getElementById('formPopup');
  formDiv.style.left = px.x + 'px';
  formDiv.style.top = px.y + 'px';
  formDiv.style.display = 'block';
  document.getElementById('lat').value = e.latlng.lat;
  document.getElementById('lng').value = e.latlng.lng;
});

document.getElementById('markerForm').addEventListener('submit', function(evt) {
  evt.preventDefault();
  var form = evt.target;
  var formData = new FormData(form);
  fetch('/markers', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(m => {
    addMarkerToMap(m);
    document.getElementById('formPopup').style.display = 'none';
    form.reset();
  })
  .catch(err => {
    console.error('上傳失敗', err);
    alert('上傳失敗');
  });
});

document.getElementById('cancelBtn').addEventListener('click', function() {
  document.getElementById('formPopup').style.display = 'none';
});

// 頁面載入時執行
loadMarkers();

static/css/style.css

css
複製程式碼
body {
  font-family: Arial, sans-serif;
}

#formPopup {
  z-index: 1000;
  background: white;
}

三、使用方式 / 測試流程

1. 安裝 Flask：

   bash
   複製程式碼
   pip install flask
   

2. 確認資料夾結構正確，並且 static/uploads/ 存在可寫入。

3. 啟動應用：

   bash
   複製程式碼
   python app.py
   

4. 若是第一次運行，markers.db 不存在，程式會自動執行 init_db()，依 schema.sql 建立表格。你也可手動瀏覽 http://127.0.0.1:5000/initdb 強制初始化（注意：這會清除所有資料）。

5. 在瀏覽器開啟 http://127.0.0.1:5000/。

6. 點地圖任意處會彈出「新增標記」表單，你可以輸入文字與上傳圖片。提交後，地圖上會出現新標記。

7. 點那個標記，會彈出 overlay 視窗，裡面會顯示：

   • 初始資料（主表的文字 + 圖片）

   • 歷史更新：所有過去對該標記提交的更新（文字 + 圖片 + 更新時間）

   • 下方還有一個區域可以讓你輸入新的文字 / 選擇新圖片來做更新

8. 更新成功後，overlay 關閉，地圖重新載入標記，並在標記 popup / overlay 中顯示最新 + 所有歷史資訊。

如果你願意，我可以幫你把這個專案上傳到 GitHub，給你一個下載連結，也可以幫你部署到某個雲端（例如 Heroku / Render / Vercel），讓你可以直接在網路上測試。要嗎？

我可以一步步教你怎麼把那個 Flask 專案部署到 Render。只是要特別提醒一件很重要的事：Render 的檔案系統是 暫存型（ephemeral） 的，也就是說你的 SQLite 資料庫檔案和上傳的圖片若直接寫在本地檔案系統，可能在重啟或下次部署時消失。這部份需要用 Render 提供的「Disk」或改用雲端儲存 / 外部資料庫（例如 Postgres + S3）才能讓資料持久化。 Render+2Render+2

下面我先教你一般部署流程 + 如何處理資料持久化的選項。

一、準備你的專案讓它適合部署

在部署之前，建議你做以下準備：

1. 建立 requirements.txt

   在你的專案根目錄，執行：

   bash
   複製程式碼
   pip freeze > requirements.txt
   

   確保 Flask、gunicorn（生產用 WSGI server）、其他套件（如 sqlite3 通常是標準庫，不用列）被列進去。

2. 設定啟動指令（start command）

   在 Render 上使用 gunicorn 比直接用 python app.py 好。假設你的 Flask app 在 app.py 中，且物件叫 app，則啟動指令可以是：

   nginx
   複製程式碼
   gunicorn app:app
   

   （如果你的檔案結構或命名不同，要改成對應的：gunicorn MODULE:APPVARIABLE）

3. 修改程式以適應環境變數 / 配置

   • 讓你的程式在「啟動時若資料庫檔案不存在」時自動建立資料庫結構（像之前的 init_db()）

   • 若你改用外部資料庫（如 Postgres），程式要從環境變數讀取資料庫 URL

   • 圖片上傳部分可能要改成用雲端儲存（如 AWS S3 / GCP Storage / Render 的 Disk）

4. 版本控制上傳到 GitHub / GitLab / Bitbucket

   Render 可以從 GitHub 或其他 Git 就直接拉代碼部署。

5. 設定 .gitignore，忽略 markers.db、static/uploads/ 之類不必要版本控制的檔案（視你的設計）。

二、在 Render 上建立 Web Service

以下是標準流程：

1. 登入 Render（若還沒帳號要註冊）

2. 在 Dashboard 點選 New → Web Service

3. 選擇你剛剛上傳代碼的 Git 儲存庫

4. 填寫參數：

   項目	值／範例
   Environment / Language	Python 3
   Build Command	pip install -r requirements.txt
   Start Command	gunicorn app:app
   Instance Type	根據付費計畫選（free / standard / etc）

5. 確認一切設定無誤後，按 Deploy。Render 會自動拉代碼、執行 build 指令、啟動你的 App。

這就是 Render 官方教學中部署 Flask 的方式。 Render

三、解決資料持久化問題

如前面提到，Render 的檔案系統是暫存性的：當你部署、重啟或更新時，先前寫入的檔案可能會被重置。這對於 SQLite 檔案或上傳的圖片是一個大問題。很多人在論壇反映他們在 Render 部署 SQLite 時資料被重置就是這原因。 Render

你有幾個方案來解決：

選項 A：使用 Render 的「Disk」

Render 提供一個 Persistent Disk（也稱作附加磁碟）服務，你可以把 SQLite 檔案、上傳資料夾放到這個 Disk 上，讓檔案不會因重啟而消失。你需要在 Render 上創一個 Disk，並在 Web Service 中掛載這個 Disk，並在 Flask 程式中把 UPLOAD_FOLDER 與 DATABASE 指向該 Disk 的路徑。

Render 官網關於 Data Persistence 有說明。 app-generator.dev