如何將jQuery變量設置為django模板變量

Question

我在Django模板中使用jQuery腳本來呈現Google Map。 目標是在地圖上繪制多個標記。 我嘗試了兩件事：

1. 將jQuery var設置為Django模板變量，我將其定義為views.py中的列表。 在這種情況下無法生成任何標記。 只是一張空白的地圖。

   var markers = {{marker_list}};

   我在頁面上打印了marker_list以確認，這是我上次測試中的內容：marker_list = [['Chiang Mai Park'，21.0333,21.0333]，['胡志明陵墓'，21.036666667,21.036666667]]

2. 在jQuery腳本中使用模板標簽創建一個for循環，並使用模板變量構建列表。 這樣，即使列表中有多個位置，也只會繪制一個標記（參見上面的marker_list）。

   {％例如在queryset％}

   var markers = [[{{instance.place_id}}，{{instance.place_lat}}，{{instance.place_long}}]];

   {％endfor％}

完整代碼如下所示，顯示嘗試＃2。 請注意，javascript中的“var markers”需要列表列表。 即var markers = [[name1，latitude1，longitude1]，[name2，latitude2，longitude2]]。

任何幫助將非常感激。 我既是Django又是Javascript n00b。

views.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.")

places_map.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 }}

Answer 2

通過執行{{ marker_list }}您最終得到一個顯然不好的字符串，我通常使用的解決方案是定義一個空白數組然后追加到它

var markers = [];
{% for instance in queryset %}    
markers.append([{{ instance.place_id }}, {{ instance.place_lat }}, {{ instance.place_long }}]);    
{% endfor %}

當然你可以在for循環之后關閉數組，這可能會產生jslint錯誤，盡管它應該也能正常工作。

var markers = [
{% for instance in queryset %}    
[{{ instance.place_id }}, {{ instance.place_lat }}, {{ instance.place_long }}],    
{% endfor %}
];