将叶贴图插入jinja模板

And*_*rei 8 html python jinja2 flask folium

我想将Follium Map插入到Jinja模板中。

运行

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)
Run Code Online (Sandbox Code Playgroud)

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 %}
Run Code Online (Sandbox Code Playgroud)

我的网站显示当前行:

<folium.folium.Map object at 0x00000000069D5DA0>
Run Code Online (Sandbox Code Playgroud)

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

我怎样才能做到这一点?

Lin*_*esa 7

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

\n

这是文件结构

\n
proectApp\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.py\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 templates\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 map.html\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n

应用程序.py

\n
proectApp\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app.py\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 templates\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 map.html\n
Run Code Online (Sandbox Code Playgroud)\n

索引.html

\n
from flask import Flask, render_template\nimport folium\n\napp = Flask(__name__)\n\n@app.route(\'/\')\ndef index():\n    start_coords = (-6.1753924, 106.8271528)\n    folium_map = folium.Map(\n        location=start_coords, \n        zoom_start=17\n    )\n    folium_map.save(\'templates/map.html\')\n    return render_template(\'index.html\')\n\n@app.route(\'/map\')\ndef map():\n    return render_template(\'map.html\')\n\nif __name__ == \'__main__\':\n    app.run(debug=True)\n
Run Code Online (Sandbox Code Playgroud)\n

结果将在浏览器上显示如下:

\n

烧瓶上的叶子

\n

希望对您有帮助。

\n


bre*_*nan 5

您可以使用来保存生成的html folium_map.save('templates/map.html')。然后,您可以使用jinja2来{% include "map.html" %}。如所示将生成的html包裹在div标签中时,它不会呈现地图,如果必须进行封装,请考虑使用iframe自定义叶子模板

文件结构

myapp
??? run.py
??? templates
    ??? index.html
    ??? layout.html
Run Code Online (Sandbox Code Playgroud)

运行

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)
Run Code Online (Sandbox Code Playgroud)

layout.html

<!DOCTYPE HTML>
<head>
  <title>{% block title %}{% endblock %}</title>
</head>
<body>
  <header>{% block head %}{% endblock %}</header>
  {% block body %}{% endblock %}
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

index.html

{% extends "layout.html" %}
{% block title %} Test {% endblock %}
{% block head %} {{ super() }} {% endblock %}
{% block body %}
    {% include "map.html" %}
{% endblock %}
Run Code Online (Sandbox Code Playgroud)