Как установить переменную jQuery в качестве переменной шаблона django

Question

Я использую сценарий jQuery внутри шаблона Django, чтобы отображать карту Google. Цель состоит в том, чтобы нанести на карту несколько маркеров. Я пробовал две вещи:

1. Установите вар Jquery к переменной шаблона Django, который я определил как список в views.py. В этом случае не удалось произвести никаких маркеров. Просто пустая карта.

   var markers = {{marker_list}};

   Я напечатал marker_list на странице, чтобы подтвердить, что было это в моем последнем тесте: marker_list = [[ «Чиангмай Park», 21,0333, 21,0333], [ «Мавзолей Хо Ши Мина», +21,036666667, +21,036666667]]

2. Сделайте цикл for с тегами шаблона внутри сценария jQuery и создайте список с помощью переменных шаблона. При этом будет отображаться только один маркер, даже если в списке есть несколько местоположений (см. Marker_list выше).

   {%, например, в QuerySet%}

   маркеры вар = [ [{{instance.place_id}}, {{instance.place_lat}}, {{instance.place_long}}] ];

   {% ENDFOR%}

Полный код ниже показывает попытку 2 #. Обратите внимание, что для «маркеров var» в javascript требуется список списков. т. е. маркеры var = [[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 фильтр так Джанго не избежать символов:

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 %} 
];