django数据渲染到JavaScript以生成带有纬度和经度的地图多段线

我有一个名为MapLocation的模型，在MapLocation模型中，我有几个属性，比如packageid、location\u名称、纬度和经度。我的目标是使用Lifletjs构建地图多段线。为此，我需要获取纬度和经度，并将它们呈现给模板，以便在javascript文件中使用lat lng。我有多个lat lng用于特定的旅游套餐，我需要为此运行for循环。以下是我的视图代码：

from django.shortcuts import render
from .models import MapLocation
from django.core import serializers
import json
from django.http import HttpResponseRedirect, HttpResponse
from django.core.serializers.json import DjangoJSONEncoder
# Create your views here.


def showthis(request):
json_res = serializers.serialize('json',MapLocation.objects.filter(package_id=1),fields=  ('latitude','longitude'))
context= {'all_objects': json_res}
return render(request, 'test.html', context)

我使用serializer以json格式呈现数据，下面是我的javascript模板代码

            var js_list = "{{all_objects|escapejs}}";
            
            var myJSONList = (("{{all_objects}}").replace(/&(l|g|quo)t;/g, function(a,b){
                        return {
                            l   : '<',
                            g   : '>',
                            quo : '"'
                        }[b];
                    }));

            myData = JSON.parse( myJSONList );
            console.log(myData);

var js_list=“{{all_objects}escapejs}”；
var myJSONList=（“{all_objects}}”）.replace（/&（l|g|quo）t；/g，函数（a，b）{
返回{
l:“，
“是吗？”
}[b] )；
}));
myData=JSON.parse（myJSONList）；
console.log（myData）；

在编写这些代码之后，我在控制台中获得了所有数据，如下面给出的布局

现在我想在这里循环纬度和经度，在地图上创建一条多段线

var js_list = "{{all_objects|escapejs}}";
        
        var myJSONList = (("{{all_objects}}").replace(/&(l|g|quo)t;/g, function(a,b){
                    return {
                        l   : '<',
                        g   : '>',
                        quo : '"'
                    }[b];
                }));

    myData = JSON.parse( myJSONList );
    console.log(myData);


        var mymap = L.map('mapid').setView([51.505, -0.09], 15);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYml0YTYzOSIsImEiOiJja2NsNDQwZGMwMG5iMnB0ZHoxaDJzeXZ0In0.jcSkP5MJWjG3yuRGn8J5og', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(mymap);

        

        L.marker([51.52, -0.05]).addTo(mymap)
            .bindPopup("<b>End Point!</b><br />I am a popup.").openPopup();

        L.marker([51.509, -0.08]).addTo(mymap)
            .bindPopup("<b>Start Point!</b><br />I am a popup.").openPopup();


        

        L.polyline([
            [51.509, -0.08], #forloop here to make it dynamic, becaus ethere will be many lat lng based on different tour package
            [51.503, -0.06],
            [51.51, -0.047],
            [51.52, -0.05],
        ],{color: 'red'}).addTo(mymap).bindPopup("I am a polygon.");


        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(mymap);
        }

        mymap.on('click', onMapClick);

var js_list=“{{all_objects}escapejs}”；
var myJSONList=（“{all_objects}}”）.replace（/&（l|g|quo）t；/g，函数（a，b）{
返回{
l:“，
“是吗？”
}[b] )；
}));
myData=JSON.parse（myJSONList）；
console.log（myData）；
var mymap=L.map（'mapid'）.setView（[51.505，-0.09]，15）；
L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？访问令牌=pk.eyj1ijoiyml0ytyzosimeijja2nsndqwzgmwmg5imnb0zhoxadjzexz0in0.jcskp5mjg3yurgn8j5og'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒/街道-v11”，
tileSize:512，
Zoomofset:-1
}).addTo（mymap）；
L.标记（[51.52，-0.05]）。添加到（mymap）
.bindPopup（“终点！
我是一个弹出窗口。”）.openPopup（）；
L.标记（[51.509，-0.08]）。添加到（mymap）
.bindPopup（“起点！
我是一个弹出窗口。”）.openPopup（）；
L.多段线([
[51.509，-0.08]，#在这里进行循环以使其具有动态性，因为ethere将根据不同的旅游套餐提供许多lat lng
[51.503, -0.06],
[51.51, -0.047],
[51.52, -0.05],
]，{color:'red'}）.addTo（mymap）.bindPopup（“我是一个多边形”）；
var popup=L.popup（）；
函数onMapClick（e）{
弹出窗口
.setLatLng（即latlng）
.setContent（“您在“+e.latlng.toString（）处单击了地图”）
.openOn（mymap）；
}
mymap.on（'click'，onmaclick）；

---

有人能给我一个正确的指示吗？我如何将所有这些lat lng动态地放到JavaScript中，或者我如何进行forloop来获取，请帮助我解决这个问题。

使用此代码。我已经创建了一个空数组，并将动态数据推送到该数组并用于您的位置。只需复制代码并粘贴即可

    var polyArr = [];
    myData.map((item) => polyArr.push([item.fields.latitude, item.fields.longitude]));
    L.polyline(polyArr, { color: 'red' }).addTo(mymap).bindPopup('I am a polygon.');

---

如果你不清楚，问我。希望这对你有帮助。谢谢你

哇，它起作用了，非常感谢你。我已经阅读了大量的文档来解决这个问题，但是用几行代码就解决了这个问题。再次感谢