在Javascript中添加带有DJango模板标记的谷歌地图标记

Adding Google Map Markers with DJango Template Tags in Javascript

本文关键字：谷歌 图标 地图 Javascript 添加 DJango      更新时间：2023-09-26

我正在尝试使用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 %}    
        }

如有任何帮助，我们将不胜感激。干杯

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

您可以使用Django生成Javascript变量和数据结构，例如在模板中的<script>标记中，然后您的外部Javascript文件可以很好地引用这些变量和数据。

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

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

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

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

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

虽然python允许在最后一个元素后面加一个逗号，但javascript不允许。

这在python中有效：

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

但在javascript中，由于语法错误而失败：

{ 
   position: point, 
   map: map, 
}

请修复此问题，然后重试。

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

[编辑]

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

在urls.py中，包括javascript的一个条目：

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

在您的appname/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')
相关文章：