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