17

我想将 follium 地图插入到 jinja 模板中。

运行.py

from flask import Flask, render_template

app = Flask(__name__)



@app.route('/')
def index():
    start_coords = (46.9540700, 142.7360300)
    folium_map = folium.Map(location=start_coords, zoom_start=14)
    folium_map.save()
    return render_template('index.html', folium_map=folium_map)


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

template/index.html - Flask 的 jinja 模板

{% extends "layout.html" %}
{% block title %}Test{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %}
**<div><!--Folium map here-->{{ folium_map }}</div>**
{% endblock %}

我的网站显示当前行：

<folium.folium.Map object at 0x00000000069D5DA0>

但我需要在这个 div 块中生成方法 follium_map.save('map.html') 的地图。

我怎样才能做到这一点？

4

3 回答 3

10

您可以将生成的 html 保存为folium_map.save('templates/map.html'). 然后你可以使用 jinja2 来{% include "map.html" %}. 当包装在div标签中时，生成的 html 不会呈现地图，如果需要封装，请考虑使用iframe或自定义 folium 模板。

文件结构

myapp
├── run.py
└── templates
    ├── index.html
    └── layout.html

运行.py

from flask import Flask, render_template
import folium

app = Flask(__name__)

@app.route('/')
def index():
    start_coords = (46.9540700, 142.7360300)
    folium_map = folium.Map(location=start_coords, zoom_start=14)
    folium_map.save('templates/map.html')
    return render_template('index.html')

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

布局.html

<!DOCTYPE HTML>
<head>
  <title>{% block title %}{% endblock %}</title>
</head>
<body>
  <header>{% block head %}{% endblock %}</header>
  {% block body %}{% endblock %}
</body>
</html>

索引.html

{% extends "layout.html" %}
{% block title %} Test {% endblock %}
{% block head %} {{ super() }} {% endblock %}
{% block body %}
    {% include "map.html" %}
{% endblock %}
于 2017-03-28T01:22:32.553 回答
4

也许它可以成为解决方案。首先，我们将 Folium 地图保存为模板文件夹中的 html 文件。然后我们创建一个 Flask 路由来渲染另一个 html 文件。在那个 html 文件上，我们创建了一个iframe元素来调用我们的地图。

这是文件结构：

proectApp
├── app.py
└── templates
    ├── index.html
    └── map.html

Folium 地图文件 ( map.html ) 将从我的app.py自动创建。在app.py 上，我将创建 2 条主路由：第一个是主路由，它将呈现index.html并创建map.html。然后另一个是渲染folium地图（map.html）。以下是代码：

应用程序.py

from flask import Flask, render_template
import folium

app = Flask(__name__)

@app.route('/')
def index():
    start_coords = (-6.1753924, 106.8271528)
    folium_map = folium.Map(
        location=start_coords, 
        zoom_start=17
    )
    folium_map.save('templates/map.html')
    return render_template('index.html')

@app.route('/map')
def map():
    return render_template('7_map.html')

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

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Folium Map</title>
</head>
<body>
    <h1>Render Folium on Flask </h1>
    <iframe class="map", src="/map" width="600" height="600"></iframe>
    <h3><b style="background-color: lightcoral; color: lightcyan;">
        Render Folium on Flask done!
    </b></h3>
</body>
</html>

结果将显示在浏览器上，如下所示：

烧瓶上的叶子

希望它可以帮助你。

于 2020-02-03T00:09:53.910 回答
1

使用 iframe 和 render_template 的不同解决方案

<iframe class="map", src="/get_map" width="1100" height="600"></iframe>

加上python烧瓶代码

# a hack going on here as web servers are caching folium generated template
# randomly move to a new name and then use render_template
@app.route('/get_map')
def get_map():
    r = int(random.triangular(0,100))
    t = "templates/map_{i}.html"
    for i in range(0,100):
        f = t.format(i=i)
        if os.path.exists(f):
            os.remove(f)
    f = t.format(i=r)
    shutil.copy("templates/map.html", f)

    r = make_response(render_template(os.path.split(f)[1]))
    r.cache_control.max_age = 0
    r.cache_control.no_cache = True
    r.cache_control.no_store = True
    r.cache_control.must_revalidate = True
    r.cache_control.proxy_revalidate = True
    return r

在呈现 httpd（在 AWS beanstalk 上）/flask 调试环境之前，如果没有复制到随机文件名，则不会获取 folium html 模板的新实例。cache_control 不是必需的，但它是我试图找到解决方案的一部分。显然这个解决方案不是线程安全的

于 2019-07-29T13:07:59.210 回答