django：如何将模板变量传递给 javascript onclick 例程？

Question

这个概念来自这个http://www.prepbootstrap.com/bootstrap-template/real-estate-list-map-dynamic

我在 django 模板中启用了 2 个块，左块显示设备信息（设备名称和位置信息），右块显示设备地图位置。当用户单击左侧面板时，右侧地图将通过将 Django 模板变量传递给 Javascript 例程来更改。init_map似乎不接受传递的变量。

当用户点击左列时，右图会根据经纬度进行切换，经onclick 例程传递。

模板页面如下：

{% block content %}
{% for device in devices %}  
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 ">    
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
        <div class="panel panel-default"  onclick="init_map( {{ device.coordinates.latitude }}, {{device.coordinates.longitude }} );return false;">
            <div class="row padall">                
                <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
                    <span></span>                                                           
                    <img src="{{ device.thumbnail.url }}">
                </div>
                <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
                    <div class="clearfix">
                        <div class="pull-left">
                            <span class="fa fa-dollar icon">{{device.name}}</span>
                        </div>
                        <div class="pull-right">
                            {{device.coordinates  }} 
                        </div>
                    </div>
                    <div>
                        <h4><span class="fa fa-map-marker icon"></span>{{ device.coordinates }}</h4>
                        <span class="fa fa-lock icon pull-right">{{  device.coordinates  }}</span>
                        {% with lat_lon=device.coordinates %}       
                         new is   {{ lat_lon }}
                        {% endwith %}
                        </div>                 
                    </div>
                </div>
            </div>
        </div>
   </div>
</div>

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
    <div class="row padbig">  
        <div id="map" class="map"></div>       
    </div>
 </div>
 {% endfor %}
 {% endblock content %}



{% block extra_js %}
<script type="text/javascript"  src="http://webapi.amap.com/maps?v=1.3&key=a23b5e94cecc8e98acd039aba6cd064c"></script>  
<script type="text/javascript">
  var lat_lon  = {{ device.coordinates | js  }};  
function init_map(lat,lon) {

    var imageLayer = new AMap.ImageLayer({
    url:'http://developer.amap.com/wp-content/uploads/2014/06/dongwuyuan.jpg',
        bounds: new AMap.Bounds(  
            new AMap.LngLat(116.327911, 39.939229),
            new AMap.LngLat(116.342659, 39.946275)),

        zooms: [15, 18] 
  });
    var map = new AMap.Map('map',{
           resizeEnable: true,

       scrollWheel: true,

       doubleClickZoom: true, 
       layers: [
           new AMap.TileLayer(),
           imageLayer
       ],

       view: new AMap.View2D({
           //center: new AMap.LngLat(116.342659, 39.946275),
          center: new AMap.LngLat(lat,lon),
           zoom:15
       })
      });  
    }
    //init_map(0);    
</script>
{% endblock %}

如果我启用“center: new AMap.LngLat(116.342659, 39.946275)”，地图将显示，而“center: new AMap.LngLat(lat,lon),”，则不显示地图。

Answer 1

这有效

<div onclick="myFunction('{{ myVar }}')">

唯一的事情是你的 myVar 会变成一个字符串，

所以如果你需要它作为一个对象，一个数组......那不是你需要的。

Answer 2

如果您传递坐标，很可能您有一个由纬度和经度组成的元组。在传递给 Javascript 函数时必须将它们分开。

你可以试试这个：

<div onclick=init_map({{ variables.0 }}, {{ variables.1 }})>