Question

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

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

var markers = {{marker_list}};

我在页面上打印了marker_list以确认，这是我上次测试中的内容：marker_list = [['Chiang Mai Park'，21.0333,21.0333]，['胡志明陵墓'，21.036666667,21.036666667]]
在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 %}
];

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

2 个答案: