这个概念来自于这个链接:http://www.prepbootstrap.com/bootstrap-template/real-estate-list-map-dynamic
我在Django模板中启用了两个块,左边的块显示设备信息(设备名称和位置信息),右边的块显示设备地图位置。当用户点击左侧面板时,通过将Django模板变量传递给Javascript例程来更改右侧地图。似乎传递的变量未被init_map接受。
当用户单击左列时,右侧地图将根据latlon切换,该值由onclick例程传递。
模板页面如下:
如果我启用了 "center: new AMap.LngLat(116.342659, 39.946275)",地图就会显示出来,而使用 "center: new AMap.LngLat(lat,lon)" 则没有地图显示。
当用户单击左列时,右侧地图将根据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)" 则没有地图显示。