如何从SQLite/Flask向Leaflet地图添加标记？两种方案均失败

方案一的错误修正 #

你在后端已经用json.dumps()把查询结果转成了JSON字符串，但前端模板又叠加| tojson过滤器，导致JSON被双重转义，最终JSON.parse解析时会失败。同时注意：cursor.execute()返回的是游标对象，不能直接赋值给结果变量，需调用fetchall()获取数据。

修正后代码 #

app.py

...
@app.route("/paraderos")
def paraderos():
    query1 = "SELECT latitud, longitud from paradero"
    cursor = connection.cursor()
    cursor.execute(query1)
    resultado = cursor.fetchall()
    # 直接传递Python列表，由模板tojson过滤器处理序列化
    return render_template("mapazo.html", paraderos=resultado)
...

mapazo.html

...
<!-- 直接用tojson生成合法JS数组，无需额外解析 -->
var paraderos = {{ paraderos | tojson }};

for (var i = 0; i < paraderos.length; i++) {
  var paradero = paraderos[i];
  var marker = L.marker([paradero[0], paradero[1]]).addTo(map_init);
}
...

方案二的错误修正 #

1. 同样存在cursor.execute()赋值错误，需调用fetchall()获取结果；
2. SQLite返回的元组列表，转成纯列表后再序列化更稳妥，避免潜在兼容问题；
3. 需确保前端map_init已正确初始化Leaflet地图（容器存在、地图实例创建完成）。

修正后代码 #

app.py

from flask import jsonify, render_template

...
@app.route('/paraderos')
def paraderos():
    query1 = "SELECT latitud, longitud from paradero"
    cursor = connection.cursor()
    cursor.execute(query1)
    resultado = cursor.fetchall()
    # 元组转列表，确保JSON序列化无异常
    paraderos_list = [list(item) for item in resultado]
    return jsonify(paraderos_list)

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

前端代码（补充地图初始化）

// 先完成地图初始化，确保容器存在（页面需有id为map的div）
var map_init = L.map('map').setView([-40.57, -73.13], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map_init);

// 再请求数据添加标记
fetch('/paraderos')
.then(response => {
  if (!response.ok) throw new Error('请求失败');
  return response.json();
})
.then(paraderos => {
    for (var i = 0; i < paraderos.length; i++) {
       var paradero = paraderos[i];
       var marker = L.marker([paradero[0], paradero[1]]).addTo(map_init);
   }
})
.catch(error => console.error('Error:', error));

额外优化建议 #

• 数据库操作使用上下文管理器，避免资源泄漏：

  with connection.cursor() as cursor:
      cursor.execute(query1)
      resultado = cursor.fetchall()
  

• 给标记添加交互弹窗：

  marker.bindPopup(`坐标：${paradero[0]}, ${paradero[1]}`);
  

• 生产环境增加异常捕获，返回友好错误：

  from flask import abort
  
  @app.route('/paraderos')
  def paraderos():
      try:
          # 数据库操作逻辑
      except Exception as e:
          print(e)
          abort(500)
  

内容的提问来源于stack exchange，提问作者Mr.Mann