Как я могу передать данные из шаблона в Django в Javascript в этом конкретном случае - PullRequest
Новая
       28

Как я могу передать данные из шаблона в Django в Javascript в этом конкретном случае

0 голосов
/ 02 июля 2019

Я использую API карты Google и пытаюсь передать данные (долготу и широту) в шаблон, а затем использовать данные в javascript для отображения определенного местоположения.

location.html 

{% for venue in property_listing %}
      {{ venue.address }}</br>
      <div id="long">{{ venue.longitude }}</br>
      <div id="lat">{{ venue.latitude }}</br>
{% endfor %}

javascript на той же странице 

<script>
      var latitude = REPLACE HERE;
      var longitude = REPLACE HERE;
      // Initialize and add the map
      function initMap() {
      // The location of Uluru
      var uluru = {lat: latitude, lng: longitude};
      // The map, centered at Uluru
      var map = new google.maps.Map(
          document.getElementById('map'), {zoom: 15, center: uluru});
      // The marker, positioned at Uluru
      var marker = new google.maps.Marker({position: uluru, map: map});
    }


    </script>

Я пытаюсь заменить значение буквально, но это не сработает.Каков наилучший способ решить эту проблему?

Ответы [ 2 ]

1 голос
/ 02 июля 2019

Прежде всего вы назначаете свои данные в div .Который не имеет правильного атрибута значения.Вот обходной путь с использованием метода getAttribute().

Назначение атрибута с именем 'value' и его соответствующих данных:

location.html 

{% for venue in property_listing %}
      {{ venue.address }}</br>
      <div id="long" value="{{ venue.longitude }}">{{ venue.longitude }}</br>
      <div id="lat" value="{{ venue.latitude }}">{{ venue.latitude }}</br>
{% endfor %}

В вашей функции javascript получите доступ к данным, получив атрибут вашего идентификатора подразделения с именем value : 

<script>
      var latitude = document.getElementById('lat').getAttribute("value");
      var longitude = document.getElementById('long').getAttribute("value");
      // Initialize and add the map
      function initMap() {
      // The location of Uluru
      var uluru = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
      // The map, centered at Uluru
      var map = new google.maps.Map(
          document.getElementById('map'), {zoom: 15, center: uluru});
      // The marker, positioned at Uluru
      var marker = new google.maps.Marker({position: uluru, map: map});
    }
</script>
0 голосов
/ 02 июля 2019

Это должно сработать: 

<script>
      var latitude = {{ venue.latitude }};
      var longitude = {{ venue.longitude }};
      // Initialize and add the map
      function initMap() {
      // The location of Uluru
      var uluru = {lat: latitude, lng: longitude};
      // The map, centered at Uluru
      var map = new google.maps.Map(
          document.getElementById('map'), {zoom: 15, center: uluru});
      // The marker, positioned at Uluru
      var marker = new google.maps.Marker({position: uluru, map: map});
    }


    </script>
...