Django просматривает объекты для размещения маркеров объектов на Google Maps - PullRequest
Новая
       5

Django просматривает объекты для размещения маркеров объектов на Google Maps

0 голосов
/ 02 декабря 2019

Я не могу понять, как сделать, чтобы флажки галочек отображались на картах Google. Я пытался зациклить это несколькими различными способами. Когда я вынимаю функцию, карта показывает обратно. Я задаюсь вопросом, возможно ли это сделать на Джанго таким образом. Спасибо за любую помощь. 

{% 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'

1 Ответ

0 голосов
/ 02 декабря 2019

Ваш код имеет некоторые проблемы, во-первых, вы не закрываете функцию 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 %}

И затем использовать переменные маркеры javascript на вашем внешнем виде, когда вызывается loadMarkers.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...