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

Posted 2023-02-24

【中文标题】在 Javascript 中使用 DJango 模板标签添加 Google 地图标记

【英文标题】：Adding Google Map Markers with DJango Template Tags in Javascript

【发布时间】：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文件之外，我不能在网页的其他部分使用模板标签吗？

【参考方案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,。这将产生错误并停止您的脚本。