django 数据渲染到 JavaScript 以制作具有纬度和经度的地图折线

Question

我有一个名为 MapLocation 的模型，在 MapLocation 模型中我有一些属性，例如 packageid、location_name、纬度和经度。我的目标是使用 Lifletjs 构建地图折线。为此，我需要获取纬度和经度并将它们呈现为模板以在 javascript 文件中使用经纬度。我有多个 lat lng 用于特定的旅游套餐，我需要运行为此循环。这是我的观点代码：

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)

我使用序列化程序以 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, 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);

有人能给我一个正确的指导吗我怎样才能把所有这些 lat lng 动态地放到 JavaScript 或者我怎样才能做一个 forloop 得到，请帮助我解决这个问题。

Answer 1

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

    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.');

不清楚的可以问我。希望这对你有帮助。谢谢

django 数据渲染到 JavaScript 以制作具有纬度和经度的地图折线

django data render to JavaScript to make a map polyline with latitude and longitude

javascript

django

google-maps

polyline

serialization