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

【问题标题】：How can i pass data from template in Django to Javascript in this specific case在这种特定情况下，如何将数据从 Django 中的模板传递到 Javascript
【发布时间】：2019-11-12 15:17:53
【问题描述】：

我正在使用 Google 地图 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>

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

【问题讨论】：

var latitude = document.getElementById('lat'); 不工作吗？
@LearningNoob 我试过了。它没有用。
只要确保你的 javascript 实际上是在你的 dom 元素之下。
javascript在页面底部
您是否从property_listing 中获取lat、lng 值？作为一个列表，它返回多个lat、lng 值。

标签： javascript python django python-3.x django-templates

【解决方案1】：

首先，您将数据分配到 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 的 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>

【讨论】：

您的解决方案是最有效的。我唯一需要添加的是行后的“parseFloat” //乌鲁鲁的位置

【解决方案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 中使用。
@CurtisBanks 为什么？你收到错误了吗？这一直对我有用。
{{ venue.latitude }} 部分被转换为venue.latitude 的值在 javascript 代码执行之前。
我一使用双花括号，右边的第二个花括号变成红色，表示不能使用。（崇高的文字）。只是为了确保 javascript 位于页面底部。
尝试引用双花括号“{{ place.latitude }}”