从 Python 中提取数组并在 HTML <script> js 中使用它答案

【问题标题】：Pull array From Python and use it in HTML <script> js从 Python 中提取数组并在 HTML <script> js 中使用它
【发布时间】：2021-08-15 14:24:44
【问题描述】：

我正在尝试使用绿色事件 API (http://www.trumba.com/calendars/green-events.rss) 创建网站下面是网络图片）

（可以看到的标记是硬编码的，不是自动的，可以进一步测试）

我将 API 的更改版本解析为 2D 数组：

格式：

GreenEventsArray = [[name, tag, location, time, description, lat, lgn]]

然后这个数组在 python 中被解析为 html，如下所示：

@app.route("/")
@app.route("/events")
def main():
    print(GreenEventsArray)
    return render_template("Index.html", GreenEventsArray = GreenEventsArray, data=json.dumps(GreenEventsArray))

HTML 底部的脚本如下所示：

<script>
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        mapboxgl.accessToken = '<My Token>';
        var map = new mapboxgl.Map({
            container: 'mapBox', // container id
            style: 'mapbox://styles/wlayton/ckp4m56hj0ekr17qp0zdeb2v2', // style URL
            center: [153, -27.47], // starting position [lng, lat]
            zoom: 9 // starting zoom
        });

        map.addControl(new mapboxgl.NavigationControl());
        
        // add markers to map
        var geojson = {{GreenEventsArray | safe}}
        window.alert(geojson[1][6]); //using as a test to check what it'll print
        //point = new mapboxgl.Marker()
        //      .setLngLat([geojson[1][7], geojson[1][6]])
        //      .addTo(map);
        geojson.forEach(function(marker) {
            window.alert(marker[6]);
            // create a HTML element for each feature
            var el = document.createElement('div');
            el.className = 'marker';

            // make a marker for each feature and add to the map
            new mapboxgl.Marker(el)
                .setLngLat([marker[6], marker[7]])
                .addTo(map);
        });

</script>

但检索到的 GreenEventsArray - 在 HTML 脚本中存储为数据 - 在 html 中仅获取数组的第一个条目，我希望它查看并使用 lat 和 lgn 为每个事件创建一个标记。

任何帮助将不胜感激。谢谢，会

【问题讨论】：

标签： python html flask jinja2 mapbox-gl

【解决方案1】：

我没有 50 个代表，所以我无法发表评论，但问题可能是您需要 API 密钥。 html 中的第 5 行 "mapboxgl.accessToken = '我的令牌';"

【讨论】：

是的，我确实有一个，我只是在发布此示例时取出它