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

Question

我正在尝试使用 Green Events API 制作一个网站（http://www.trumba.com/calendars/green-events.rss）我使用谷歌地理编码将每个事件的每个位置转换为 lgn 和 lat然后解析为 HTML 并使用标签通过 MapBox 渲染（下面的网页图像）

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

我通过将 API 的更改版本解析为二维数组：

格式：

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 浏览并为每个事件创建一个标记。

Answer 1

问题可能是您需要 API 密钥。 html 中的第 5 行“mapboxgl.accessToken = 'My Token';”