时间戳

首页 > 解决方案 > 如何在 Dash 布局中插入带有标记的 Folium 地图？

python - 如何在 Dash 布局中插入带有标记的 Folium 地图？

问题描述

我有一张使用 Folium 创建的地图，保存为 HTML 文件。它包含一些标记。现在我想将此地图作为 IFrame 元素插入到我的 Plotly-Dash 布局中。我设法做到这一点：

app.layout = html.Div(children=[
        html.Iframe(id='map', srcDoc=open('index.html', 'r').read())
], style={'padding': 10, 'flex': 1})

但是当嵌入到 Dash 布局中时，标记不会出现。为什么他们没有出现在 Dash 中？

标签： pythoniframemapsplotly-dashfolium

解决方案

Folium 的替代品是dash-leaflet. 虽然这两个组件都是基于传单的，但dash-leaflet提供了与 Dash 更紧密的集成。这是一个带有一些标记的小例子，

import dash_html_components as html
import dash_leaflet as dl
from dash import Dash

# A few cities in Denmark.
cities = [dict(title="Aalborg", position=[57.0268172, 9.837735]),
          dict(title="Aarhus", position=[56.1780842, 10.1119354]),
          dict(title="Copenhagen", position=[55.6712474, 12.5237848])]
# Create example app.
app = Dash()
app.layout = html.Div([
    dl.Map(children=[dl.TileLayer()] + [dl.Marker(**city) for city in cities],
           style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"}, id="map"),
])

if __name__ == '__main__':
    app.run_server()

您可以在文档中看到更多示例。

推荐阅读