基于Flask与Google Maps：将点击获取的lat/lng发送至视图的最简方案

嘿，这事儿其实超简单，用浏览器原生的Fetch API就能搞定，不用额外引任何第三方库，代码量少还和Flask适配得特别好。我拆成前后端两部分给你讲：

前端JavaScript修改 #

在你现有的地图点击事件里，拿到经纬度后直接加一段Fetch请求代码就行：

google.maps.event.addListener(map,'click',function(event) {
  const lat = event.latLng.lat();
  const lng = event.latLng.lng();
  
  // 保留你原本更新页面显示的逻辑
  document.getElementById('latclicked').innerHTML = lat;
  document.getElementById('longclicked').innerHTML = lng;
  
  // 发送坐标到Flask视图
  fetch('/save-coords', {
    method: 'POST',
    // 告诉后端我们传的是JSON格式数据
    headers: {
      'Content-Type': 'application/json',
    },
    // 把经纬度转成JSON字符串
    body: JSON.stringify({ latitude: lat, longitude: lng }),
  })
  .then(response => response.json())
  .then(data => {
    // 可选：加个成功反馈，比如控制台打印或页面提示
    console.log('坐标提交成功:', data);
    // alert('坐标已发送到服务器！');
  })
  .catch((error) => {
    console.error('提交出错:', error);
  });
});

后端Flask视图处理 #

在你的Flask应用里，加一个专门接收POST请求的路由来处理坐标：

from flask import Flask, request, jsonify

app = Flask(__name__)

# 处理坐标的路由
@app.route('/save-coords', methods=['POST'])
def save_coordinates():
    # 解析前端发来的JSON数据
    coord_data = request.get_json()
    
    # 提取经纬度
    latitude = coord_data.get('latitude')
    longitude = coord_data.get('longitude')
    
    # 这里可以做你需要的操作：存数据库、计算、打印等等
    print(f"收到用户点击的坐标：纬度 {latitude}，经度 {longitude}")
    
    # 返回JSON响应给前端，告知接收成功
    return jsonify({
        "status": "success",
        "received_latitude": latitude,
        "received_longitude": longitude
    })

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

为啥这是最简方案？ #

• 用浏览器原生的fetch，不用额外下载axios、jQuery这类库，减少依赖
• Flask自带的request.get_json()和jsonify，处理JSON数据零成本，不用自己写复杂解析逻辑
• 代码结构清晰，前后端逻辑一目了然

小补充 #

如果你的前端页面和Flask后端不在同一域名下（比如前端静态文件部署在CDN，后端在另一台服务器），可能会遇到跨域问题，这时候可以装个flask-cors扩展解决：

pip install flask-cors

然后在app里初始化：

from flask_cors import CORS
CORS(app)

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