在 Javascript 中使用 DJango 模板标签添加 Google 地图标记答案

【问题标题】：Adding Google Map Markers with DJango Template Tags in Javascript在 Javascript 中使用 DJango 模板标签添加 Google 地图标记
【发布时间】：2012-02-10 01:59:22
【问题描述】：

我正在尝试使用 Django 模板标签变量作为纬度和经度向地图添加一堆地图标记，但事情并不太顺利。这是我在视图 javascript 代码中的内容。我将代码作为外部 JS 文件加载。这是我必须初始化所有内容的内容。此外，当我这样做时，谷歌地图甚至不再出现。它消失了。

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

任何帮助将不胜感激。干杯。

【问题讨论】：

您发布的第二个代码 sn-p 是由 Django 在您的模板中生成的？还是在您的 javascript 文件中？（对不起，不得不问）
我在map: map, 看到一个尾随逗号。那些使 javascript 失败。
@BrianNeal：+1 它总是会咬 python 程序员做 javascript。
两个代码 sn-ps 都在一个 javascript 文件中。除了模板html文件之外，我不能在网页的其他部分使用模板标签吗？

标签： javascript django google-maps django-templates

【解决方案1】：

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

虽然 python 允许在最后一个元素后使用额外的逗号，但 javascript 不允许。

这在 python 中有效：

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

但在 javascript 中，这会因语法错误而失败：

{ 
   position: point, 
   map: map, 
}

修复此问题，然后重试。

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

[编辑]

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

在 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')

【讨论】：

我检查了控制台，它给了我一个错误，那里有 {% for mark in latest_marks %}
我想我现在明白了。我需要在 Django 中将 javascript 作为模板文件提供，以便 javascript 正常工作。感谢您提供有关萤火虫的提示。

【解决方案2】：

您不能将 Django 模板标签放在外部 javascript 文件中。 Django 甚至没有看到这些。您的网络服务器直接将这些服务提供给客户端。

您可以做的是使用 Django 生成 Javascript 变量和数据结构，例如在模板中的 <script> 标记内，然后您的外部 javascript 文件可以引用那些就好了。

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

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

然后您的外部 javascript 文件可以使用myVar。我经常这样做是为了自定义外部 javascript 脚本的行为。

而且，正如我在评论中提到的，你有一个尾随逗号：map: map,。这将产生错误并停止您的脚本。

【讨论】：