时间戳

首页 > 解决方案 > Django 循环遍历对象以在 Google 地图上放置对象标记

javascript - Django 循环遍历对象以在 Google 地图上放置对象标记

问题描述

我不知道如何让复选标记针显示在谷歌地图上我试图以几种不同的方式循环。当我取出该功能时，地图会重新显示。我想知道是否可以以这种方式在 Django 上进行操作。感谢您的任何帮助。

{% extends 'maps/base.html' %}
{% block body %}

    <head>
    <style>
      #map {
        height: 50%;
        width:50%
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });
      // Loop through the results array and place a marker for each
      // set of coordinates.

           function loadMarkers(){
              {% for object in object_list %}
                  var point = new google.maps.LatLng({{object.latitude}},{{object.longitude}});
                  var marker = new google.maps.Marker({
                  position: point,
                  map: map
              });
              {% endfor %} 


    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
    </script>
  </body>

意见：

class TestView(generic.ListView):
    template_name = 'maps/bbjecttest.html'

    def get_queryset(self):
        return Location.objects.all()

    context_object_name = 'location'

标签： javascriptpythondjangoloopsloopingselector

解决方案

您的代码有一些问题，首先您没有关闭 loadMarkers 函数。您也没有在任何地方调用 loadMarkers 函数。

我现在无法运行它，但请尝试更改并让我知道它是否适合您：

{% extends 'maps/base.html' %}
{% block body %}

    <head>
    <style>
      #map {
        height: 50%;
        width:50%
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });
      // Loop through the results array and place a marker for each
      // set of coordinates.

           function loadMarkers(){
              {% for location in object_list %}
                  var point = new google.maps.LatLng({{location.latitude}},{{location.longitude}});
                  var marker = new google.maps.Marker({
                  position: point,
                  map: map
              });
              {% endfor %} 
          }
          loadMarkers();

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
    </script>
  </body>

为了更容易调试，我会做这样的事情来定义标记：

markers = []
{% for location in object_list %}
markers.push({long:{{location.longitude}}, lat:{{location.latitude}}});
{% endfor %}

然后在调用 loadMarkers 时在外观上使用 javascript 变量标记。

推荐阅读