如何将 jQuery 变量设置为 django 模板变量

Question

我在 Django 模板中使用 jQuery 脚本来渲染 Google 地图。目标是在地图上绘制多个标记。我尝试过两件事：

1. 将 jQuery var 设置为 Django 模板变量，我将其定义为views.py 中的列表。在这种情况下无法产生任何标记。只是一张空白地图。

   var 标记 = {{marker_list }};

   我在页面上打印了marker_list进行确认，这是我上次测试中的：marker_list = [['Chiang Mai Park', 21.0333, 21.0333], ['Ho Chi Minh Mausoleum', 21.036666667, 21.036666667]]

2. 在 jQuery 脚本内使用模板标签创建 for 循环，并使用模板变量构建列表。这样，即使列表中有多个位置，也只会绘制一个标记（请参阅上面的marker_list）。

   {% 例如在查询集中 %}

   var 标记 = [ [{{instance.place_id }}, {{instance.place_lat }}, {{instance.place_long }}]];

   {% 结束 %}

完整代码如下所示，显示了尝试 #2。请注意，JavaScript 中的“var 标记”需要列表的列表。即 var 标记 = [[name1, latitude1, longitude1], [name2, latitude2, longitude2]]。

任何帮助将非常感激。我既是 Django 又是 Javascript 新手。

视图.py

def places_map(request):    
if request.user.is_authenticated():
    queryset = AddLink.objects.filter(user=request.user)
    marker_list = []

    for instance in queryset:
        name = str(instance.location)
        latitude = float(instance.place_lat)
        longitude = float(instance.place_lat)
        marker_list += [[name, latitude, longitude]]

    context = {
        "queryset": queryset,
        "marker_list": marker_list
    }

    return render(request, "places_map.html", context)
else:
    raise Http404("You must be logged in to view places.")

地点_地图.html

{% extends "base.html" %}
{% load crispy_forms_tags %}
{% load staticfiles %}

<style>
{% block style %}

#map_wrapper {
    height: 400px;
}

#map_canvas {
    width: 100%;
    height: 100%;
}

{% endblock style %}
</style>

{% block content %}

<div class='row' align='center'>
    <h1 id="places-title">Map</h1>

    {% if queryset %}
       <!-- removed -->    
    {% endif %}
</div>

<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>

<!-- For testing -->
{{ marker_list }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
// Script from http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers

    {% for instance in queryset %}
    var markers = [
        // ['London Eye, London', 51.503454,-0.119562],
        // ['Palace of Westminster, London', 51.499633,-0.124755],
        // ['Ministry of Sound', 51.498231,-0.118468],
        [{{ instance.place_id }}, {{ instance.place_lat }}, {{ instance.place_long }}]
        ];
    {% endfor %}

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant...</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the...</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>Ministry of Sound</h3>' +
        '<p>Nice place.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2], markers[i][3]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}

</script>

{% endblock content %}

Answer 1

为此，您应该使用 JSON。

context = {
    "queryset": queryset,
    "marker_list": json.dumps(marker_list)
}

在你的模板中，使用safe过滤器，这样 Django 就不会转义符号：

 var markers = {{ marker_list|safe }}