在 DJANGO 模板中渲染多个谷歌地图标记的最佳方法是什么

Question

我研究过类似的问题，但它们有不同的实现方法，因此我有点卡在尝试从视图模板呈现查询集以显示在 Google 地图上。

models.py

class Location(models.Model):
name = models.CharField(max_length=250, blank=False)
description = models.TextField(max_length=1000, null=True)
address = models.CharField(max_length=1000)
longitude = models.DecimalField(max_length=15, decimal_places=8)
latitude = models.DecimalField(max_length=15, decimal_places=8)

views.py

def index(request):
locations = Location.objects.all()
context = {'locations':locations}
return render(request, 'core/index.html', context)

.html

当前硬编码的位置

{% for activity in activities %}
<script type="text/javascript">
var locations = [
['Stadtbibliothek Zanklhof', 47.06976, 15.43154, 1],
['Stadtbibliothek dieMediathek', 47.06975, 15.43116, 2],
['Stadtbibliothek Gösting', 47.09399, 15.40548, 3],
['Stadtbibliothek Graz West', 47.06993, 15.40727, 4],
['Stadtbibliothek Graz Ost', 47.06934, 15.45888, 5],
['Stadtbibliothek Graz Süd', 47.04572, 15.43234, 6],
['Stadtbibliothek Graz Nord', 47.08350, 15.43212, 7],
['Stadtbibliothek Andritz', 47.10280, 15.42137, 8]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(47.071876, 15.441456),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
{% endfor %}

我只是停留在如何以及在何处放置标签{{ activity.longitude }}和{{ activity.latitude }}.尝试了多种方法来解决问题，但最终没有呈现谷歌地图。

如果有人能帮忙，我将不胜感激。

Answer 1

我认为在服务器端进行处理可能会更好。因此，我们可以构造一个将创建 JSON blob 的视图：

import json
def index(request):
locations = [
[l.name, l.latitude, l.longitude, i]
for i, l in enumerate(Location.objects.all())
]
context = {'locations':json.dumps(locations)}
return render(request, 'core/index.html', context)

在模板中，我们只需将其传递给位置变量：

<script type="text/javascript">
var locations ={{ locations|safe }};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(47.071876, 15.441456),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>