如何将JavaScript中的经纬度坐标发送至Flask服务器并存入数据库

1. 修改前端表单 #

在原有表单内新增两个隐藏输入框，用于存储JS获取到的经纬度数据，随评论内容一起提交：

<div class="row">
    <form action="." method="POST">
        <textarea name="contents" placeholder="Enter a comment" class="form-control"></textarea>
        <!-- 新增隐藏字段存储经纬度 -->
        <input type="hidden" name="latitude" id="latitude" value="">
        <input type="hidden" name="longitude" id="longitude" value="">
        <input type="submit" class="btn btn-success" value="Post comment">
    </form>
</div>

2. 补充JS赋值逻辑 #

拿到你JS代码里的latitude和longitude变量后，直接赋值给上面两个隐藏输入框即可：

// 替换为你实际代码中获取到的经纬度变量
const latitude = 39.9042; 
const longitude = 116.4074; 

// 赋值到隐藏输入框，提交表单时会自动带到后端
document.getElementById('latitude').value = latitude;
document.getElementById('longitude').value = longitude;

如果是通过浏览器定位API获取坐标，可参考完整示例：

navigator.geolocation.getCurrentPosition(position => {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  document.getElementById('latitude').value = latitude;
  document.getElementById('longitude').value = longitude;
});

3. 修改Flask后端逻辑 #

调整路由代码，接收经纬度参数并存入数据库，需确保你的Comment模型已经对应添加了经纬度字段：

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        return render_template("bulletin.html", comments=Comment.query.filter(Comment.content != ''))

    # 接收表单中的经纬度参数，转浮点型存储
    latitude = float(request.form.get("latitude", 0.0))
    longitude = float(request.form.get("longitude", 0.0))
    # 实例化Comment时传入经纬度
    comment = Comment(
        content=request.form["contents"],
        Latitude=latitude,
        Longitude=longitude
    )
    db.session.add(comment)
    db.session.commit()
    return redirect(url_for('index'))

注意事项 #

• 代码里的Latitude、Longitude字段名要和你数据库列名、Comment模型字段名完全匹配，如果是小写命名就对应改成小写
• 若需要限制用户必须授权定位才能提交，可以在前端加提交校验，未获取到坐标时禁止提交表单

内容的提问来源于stack exchange，提问作者jack_frost