该概念来自此http://www.prepbootstrap.com/bootstrap-template/real-estate-list-map-dynamic
我在Django模板中启用了2个块,左边的块显示了设备信息(设备名称和位置信息),右边的块显示了设备映射的位置。当用户单击左侧面板时,通过将Django模板变量传递给Javascript例程,右边的映射将发生变化。似乎传递的变量不被init_map接受。
当用户单击左列时,右图将根据latlon进行切换,这由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),”,则不会显示地图。
如果要传递坐标,则很可能具有由纬度和经度组成的元组。在传递给Javascript函数时,必须将它们分开。
您可以尝试以下方法:
<div onclick=init_map({{ variables.0 }}, {{ variables.1 }})>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句