使用Django模板标签在Javascript中添加Google地图标记

Question

我尝试使用Django模板标签变量作为纬度和经度添加地图标记，但事情并不顺利。以下是我在视图javascript代码中的内容。我将其作为外部JS文件加载。以下是我初始化一初始代码。由于这个操作，Google地图甚至没有再显示出来，它消失了。

 function initialize() {
            var latLng = new google.maps.LatLng(41.85, -87.65);

            map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: 8,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });



             marker = new google.maps.Marker({
                position: latLng,
                title: 'Point A',
                map: map,
                draggable: true
            });

            // Update current position inf o and load in markers from database
            loadMarkers();
            updateMarkerPosition(latLng);
            geocodePosition(latLng);

下面是loadMarkers()的样子：

            function loadMarkers(){
            {% for mark in latest_marks %}
            var point = new google.maps.LatLng({{mark.lat}},{{mark.lng}});
                var marker = new google.maps.Marker({
                position: point,
                map: map,
            });
            {% endfor %}    
        }

希望能得到您的帮助，非常感谢。谢谢。

- thebeagle

---

你发布的第二段代码片段是由Django在你的模板中生成的吗？还是在你的JavaScript文件中？（抱歉，不得不问一下） - Brian Neal

我注意到 map: map, 这一行末尾有一个逗号，它可能会导致 JavaScript 报错。请将其删除。 - Brian Neal

@BrianNeal：+1，这总是让Python程序员在做JavaScript时感到困扰。 - Paulo Scardine

这两个代码片段都在同一个JavaScript文件中。除了模板HTML文件之外，我不能在网页的其他部分使用模板标签吗？ - thebeagle

Answer 1

你不能在外部的JavaScript文件中使用Django模板标签，因为Django无法识别它们。这些文件会直接由你的Web服务器提供给客户端。

但是，你可以使用Django生成JavaScript变量和数据结构，例如在模板中的<script>标签内，然后你的外部JavaScript文件就可以正常引用它们了。

例如，在你的模板中，你可以让Django生成：

<script>var myVar = {something: 42};</script>

你可以使用外部JavaScript文件来利用myVar变量。我经常这样做来自定义外部JavaScript脚本的行为。

另外，正如我在评论中提到的，你有一个多余的逗号：map: map,。这会导致错误并停止你的脚本运行。

- Brian Neal

Answer 2

很可能你的javascript代码中存在错误，导致google maps api无法执行。你的代码确实有一个很容易发现的javascript错误：正如Brian Neal所指出的那样，Python中的字典文字与ecmascript中的对象文字非常相似，但存在微妙的区别：

在Python中，允许在最后一个元素之后添加逗号，而Javascript不允许。

这在Python中有效：

{ 
   'position': point, 
   'map': map, 
}

但是在JavaScript中，这会导致语法错误：

{ 
   position: point, 
   map: map, 
}

请修复此问题并重试。

现代的每个网络浏览器都有不错的JavaScript调试工具，Chrome和Firefox都有非常好的工具（IE的最新版本也相当不错）。如果您需要进一步帮助，请查看JavaScript控制台并告诉我们您看到了哪些错误。

[编辑]

为了使django模板标签被解释，您必须从django视图中提供JavaScript文件，而不是从静态文件中提供。

在urls.py文件中，包括一个JavaScript的条目：

      (r'jsresources/latest_points.js', 'yourappname.views.latest_points') 

在yourappname/views.py中，可以这样做：

def latest_points(request):
    latest_points = YourPointsModel.objects.order_by('-id')[100]
    return render_to_response('latest_points.js', locals(), mimetype='text/javascript')

- Paulo Scardine

---

我查看了控制台，发现出现了错误，其中包含 {% for mark in latest_marks %}。 - thebeagle

我想我现在明白了。为了使JavaScript正常工作，我需要将其作为Django中的模板文件提供。不过还是谢谢你关于Firebug的提示。 - thebeagle