从Flask后端获取GeoJSON并在Google Maps JS API使用时遇404错误

1. 先确认Flask后端路由与返回格式 #

首先检查你的Flask接口是否正确定义，确保路由可访问且返回标准GeoJSON格式：

from flask import Flask, jsonify
import json

app = Flask(__name__)

# 示例：从本地文件读取GeoJSON并返回
@app.route('/api/geojson-data', methods=['GET'])
def get_geojson():
    try:
        with open('your_map_data.geojson', 'r') as f:
            geojson = json.load(f)
        # 必须用jsonify返回，自动设置正确的Content-Type头
        return jsonify(geojson)
    except FileNotFoundError:
        return jsonify({"error": "GeoJSON file not found"}), 404

# 跨域处理（如果前端与后端端口不同，需安装flask-cors后添加）
from flask_cors import CORS
CORS(app)

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

注意：

• 路由路径要和前端请求的地址完全匹配，比如前端要请求/api/geojson-data，不能写错
• 禁止直接返回json.dumps()的字符串，必须用jsonify包装，否则前端无法正确解析JSON

2. 修复前端fetch的错误用法 #

出现undefined或[object Object]请求地址，大概率是fetch参数传错或Promise处理逻辑错误，正确写法如下：

// 初始化Google Maps实例后执行
function loadMapData() {
    // 这里的URL要和Flask路由完全一致
    fetch('/api/geojson-data')
        .then(res => {
            if (!res.ok) throw new Error(`请求失败：${res.status}`);
            return res.json(); // 解析返回的JSON数据
        })
        .then(geojsonData => {
            // 使用addGeoJson添加数据，而不是loadGeoJson（loadGeoJson是直接加载URL）
            map.data.addGeoJson(geojsonData);
            // 可选：设置图形样式
            map.data.setStyle({
                fillColor: '#2196F3',
                strokeColor: '#1976D2',
                strokeWeight: 2
            });
        })
        .catch(err => console.error('加载失败：', err));
}

常见错误点：

• 错误地将fetch参数写成对象（如fetch({url: '/api/xxx'})），导致请求地址被解析为[object Object]
• 未调用res.json()直接将响应对象传给addGeoJson
• 跨域问题：前后端端口不同时未配置CORS，导致请求被拦截

3. 验证GeoJSON格式有效性 #

虽然你说直接加载URL正常，但仍需确认后端返回的GeoJSON与原文件一致：

• 直接在浏览器访问Flask接口地址（如http://localhost:5000/api/geojson-data），查看返回内容是否和原GeoJSON文件完全一致
• 检查是否存在语法错误（如多余逗号、缺失括号）

4. 简化方案：直接提供静态GeoJSON文件 #

如果不需要后端处理GeoJSON数据，可将文件放在Flask的static目录下，前端直接用loadGeoJson加载：

map.data.loadGeoJson('/static/your_map_data.geojson');

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