这个概念来自这个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> …Run Code Online (Sandbox Code Playgroud)