Question

我正在尝试遍历JavaScript中的字典区域列表。该列表来自渲染上下文，称为“ spots”。如果我打印“斑点”，这就是我看到的：

[{u'rider_ability': u'Intermediate, Expert', u'spot_distance': 0, u'water_type': u'Shallow, Flat, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.6775, u'lng': 14.7587, u'spot_name': u'Salerno'}, {u'rider_ability': u'Expert', u'spot_distance': 7, u'water_type': u'Flat, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.6436, u'lng': 14.6984, u'spot_name': u'Cetara'}, {u'rider_ability': u'Intermediate, Expert', u'spot_distance': 16, u'water_type': u'Chop, Small wave', u'water_quality': u'Crystal clear', u'lat': 40.6262, u'lng': 14.5883, u'spot_name': u'Spiaggia Duoglie'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 33, u'water_type': u'Shallow, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.4271, u'lng': 14.9818, u'spot_name': u'Ponte di Ferro'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 36, u'water_type': u'Shallow, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.4026, u'lng': 14.9949, u'spot_name': u'Paestum'}, {u'rider_ability': u'Beginner, Intermediate, Expert', u'spot_distance': 41, u'water_type': u'Shallow, Flat, Chop, Small wave', u'water_quality': u'Clean', u'lat': 40.343, u'lng': 14.9717, u'spot_name': u'Agropoli'}]

这是我要使用的代码（没有任何结果，我看到一个空的地图）。

<script>
    const options = {
            key: 'MYKEY',
            verbose: true,
        }

    windyInit(options, windyAPI => {
        const {
            map
        } = windyAPI

        {% for spot in spots %}

            L.marker([spot.lat, spot.lng]).bindPopup(spot.spot_name).addTo(map)

        {% endfor %}
    })

</script>

关于怎么做的任何想法？非常感谢。

Answer 1

您没有使用大括号{{ }}来插入变量。只需将其替换：

[spot.lat, spot.lng]

使用

[{{ spot.lat }}, {{ spot.lng }}]

，您一切顺利。您可以阅读有关模板variables的更多信息。

Answer 2

尝试在JavaScript中使用xhr并将您的数据转换为json并使用HttpResponse（）

Answer 3

如果要使用相同的代码，请确保循环将在脚本运行之前首先完成，否则将不会呈现。还有一件事用{{spot.lat}}和{{spot.lng}}代替。您错过了花括号。.：-）

在模板javascript中访问Django“上下文”（在地图上创建标记）

3 个答案: