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

Posted 2023-02-24

【中文标题】django 数据渲染到 JavaScript 以制作具有纬度和经度的地图折线

【英文标题】：django data render to JavaScript to make a map polyline with latitude and longitude

【发布时间】：2020-11-13 07:17:03

【问题描述】：

我有一个名为 MapLocation 的模型，在 MapLocation 模型中我有几个属性，例如 packageid、location_name、纬度和经度。我的目标是使用 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)

我使用序列化器以 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 来获取，请帮助我解决这个问题。

【参考方案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.');

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

【讨论】：

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