Question

我正在使用Google map api，并且试图将数据（经度和纬度）传递到模板，然后使用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>

我试图按字面值替换该值，但是它不起作用。解决此问题的最佳方法是什么？

Answer 1

首先，您要将数据分配到 div 中。没有适当的value属性。这是使用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 的div ID的属性来访问数据：

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

Answer 2

这应该可以解决问题：

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

在这种特定情况下，如何将数据从Django中的模板传递到Javascript

2 个答案: