基于上篇实现几个轨迹点实现连线
效果图
上篇显示了多个设备点。现在实现通过该设备点点击的时候查看该设备的运动轨迹。吧上篇文章的方法重新修改一下即可。其他方法不用变,这个稍微修改一下,获取到对弈你的id,到时候通过id查询到该设备存在的经纬度记录,然后把数据加载出来。这个方法原来是弹出信息窗口的,改编成路径跳转就行,跳转的时候带上id。
function openInfo(content,e){
window.open(‘showLine?id=’+content);
}
跳到对应的页面之后,查询对应的数据,上代码
<script type="text/javascript">
var myIcon = new BMap.Icon("${pageContext.request.contextPath }/static/img/38375162504f550ebe57afd1912b4b3.png",new BMap.Size(60,80));
var x = "117.00";
var y = "36.40";
var lev1 = "11";
$(function(){
showMap();
});
var map;
function showMap(){
map = new BMap.Map("container"); //创建地图
map.centerAndZoom(new BMap.Point(x,y), lev1);//初始化地图
map.addControl(new BMap.MapTypeControl());//添加地图类型控件
//map.setMapType(BMAP_HYBRID_MAP);//此地图类型展示卫星和路网的混合视图
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
//地图显示位置
var city = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}}); //地图显示到查询结果处
var s = $("#wz").val();
city.search(s); //查找城市
var dwname=$('#sydwmc').val();
var linePoints = [];
$.ajax({
url:"getMap",
type:"post",
data:{"dwname":dwname},
dataType:"json",
success:function(result){
for(var i=15;i<25;i++){
//显示标注
var pt = new BMap.Point(result[i].x, result[i].y);
var marker = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker);
//显示文本
var label = new BMap.Label(result[i].dw,{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
//添加折线
linePoints.push(pt);
var polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //创建折线
map.addOverlay(polyline); //增加折线
}
setZoom(linePoints);//重新规划试图效果
},
error:function(){
alert("地图显示异常,请刷新重试!");
}
});
}
//根据点信息实时更新地图显示范围,让轨迹完整显示。设置新的中心点和显示级别
function setZoom(bPoints){
var view = map.getViewport(eval(bPoints));
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint,mapZoom);
}
</script>