mui 地图轨迹回放
Posted zyb-722
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mui 地图轨迹回放相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="fonts1/iconfont.css" />
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 44px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
.bhj{
height: 40px;
width: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div class="mui-content">
<div id="maps" style="width: 100%;height: 31rem;">
</div>
</div>
<nav class="mui-bar mui-bar-tab" style="background: #FFFFFF;text-align: center;padding-top: 0.5rem;">
<div class="mui-input-row mui-input-range field-contain">
<div style="float:left" class="iconfont icon-bofang1 bhj" id="bofang"></div>
<div style="float:left" class="iconfont icon-zhongbo bhj" id="chongbo"></div>
</div>
</nav>
<script src="js/mui.js"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"></script><!--ak值可以自己百度地图申请-->
<script type="text/javascript">
mui.init();
var map = null;
var playSpeed = 160; //正常播放间隔是160毫秒，可以根据自己需求设置播放速率
var pointstart = [];//开始点
var pointend = [];//结束点
var stopoff=false;//暂停开关false暂停 true开始
var points = [];//所有线轨迹点集合
var numi = 0;//当前执行数目
var timer = null;//定时器
var onwpoint=null;//轨迹播放时的当前点
mui.plusReady(function() {
plusReady();
});
function plusReady() {
var view = plus.webview.currentWebview();
map = new plus.maps.Map(‘maps‘); // 创建地图实例
Geolocation()//设置地图
getGuiJiData()//模拟服务器请求数据
function getGuiJiData(){
var data={//服务器请求来的数据格式
"rows": [{
"POINT_Y": "108.916889",
"POINT_X": "34.259502"
}, {
"POINT_Y": "108.916889",
"POINT_X": "34.259502"
}, {
"POINT_Y": "108.916889",
"POINT_X": "34.259502"
}, {
"POINT_Y": "108.916889",
"POINT_X": "34.259502"
}, {
"POINT_Y": "108.916571",
"POINT_X": "34.259776"
}, {
"POINT_Y": "108.916591",
"POINT_X": "34.259779"
}, {
"POINT_Y": "108.916625",
"POINT_X": "34.25982"
}, {
"POINT_Y": "108.916657",
"POINT_X": "34.25992"
}, {
"POINT_Y": "108.916677",
"POINT_X": "34.260004"
}, {
"POINT_Y": "108.916703",
"POINT_X": "34.260071"
}, {
"POINT_Y": "108.916749",
"POINT_X": "34.260137"
}, {
"POINT_Y": "108.916784",
"POINT_X": "34.260157"
}],
"result": "success"
}
guiJiTotal = data.rows.length;
if (data.rows.length>=2) {
pointstart.push(new plus.maps.Point(data.rows[0].POINT_Y,data.rows[0].POINT_X));//把轨迹的第一个点设置为起点
//设置起点marker
var marker = new plus.maps.Marker(new plus.maps.Point(data.rows[0].POINT_Y, data.rows[0].POINT_X));
marker.setIcon("images/start.png");
marker.setLabel("起点");
map.addOverlay(marker);
pointend.push(data.rows[data.rows.length - 1].POINT_Y,data.rows[data.rows.length - 1].POINT_X);//把轨迹的最后一个点设置为终点
//设置终点marker
var marker = new plus.maps.Marker(new plus.maps.Point( data.rows[data.rows.length - 1].POINT_Y,data.rows[data.rows.length - 1].POINT_X));
marker.setIcon("images/end.png");
marker.setLabel("终点");
map.addOverlay(marker);
}
//把请求的点集合存到points集合里
for (var i = 0; i < data.rows.length; i++) {
var longtitude =data.rows[i].POINT_Y;
var latitude = data.rows[i].POINT_X;
points.push(new plus.maps.Point(longtitude, latitude));
}
//开始画轨迹
timer = setInterval(clock, playSpeed);
}
//定时绘制轨迹
function showLine() {
if(stopoff==false){
return;
}
//两点画一个线
var polylineObj = null;
var point_line = [];
point_line[0] = new plus.maps.Point(points[numi].longitude, points[numi].latitude);
point_line[1] = new plus.maps.Point(points[numi+1].longitude, points[numi+1].latitude);
map.setCenter((point_line[1])); //设置当前点为地图中心点
polylineObj = new plus.maps.Polyline(point_line);
polylineObj.setLineWidth(6);//设置线的粗细（android和ios显示粗细不一样）
polylineObj.setStrokeColor("#c3421a");//设置线的颜色
map.addOverlay(polylineObj);
//设置当前运行点的marker
var marker = new plus.maps.Marker(point_line[1]);
marker.setIcon("images/1.png");
map.removeOverlay(onwpoint)
onwpoint=marker;
map.addOverlay(marker);
numi++;
}
function clock() {
showLine();
if (numi >= guiJiTotal - 1) {
stopoff=false;
$("#bofang").removeClass("icon-bofang ");
$("#bofang").addClass("icon-bofang1");
clearInterval(timer);
}
}
//开始/暂停播放切换
mui(".mui-bar").on("tap","#bofang",function(){//设置暂停，开始的图标，用阿里适量图。可以自己阿里适量图库下载
if(stopoff){
$("#bofang").removeClass("icon-bofang ");
$("#bofang").addClass("icon-bofang1");
}else{
$("#bofang").removeClass("icon-bofang1");
$("#bofang").addClass("icon-bofang ");
}
stopoff=!stopoff;
})
//重播
mui(".mui-bar").on("tap","#chongbo",function(){
clearInterval(timer);
pointstart=[];
points=[];
pointend=[];
numi=0;
stopoff=true;
$("#bofang").removeClass("icon-bofang1");
$("#bofang").addClass("icon-bofang ");
map.clearOverlays();//删除地图所有覆盖物
getGuiJiData();
})
}
function Geolocation() {
map.setZoom(18);//显示层级
map.showUserLocation(true);
map.showZoomControls(true);
map.getUserLocation(function(state, point) {
if (0 == state) {
if (point.latitude == ‘5e-324‘) {
mui.toast("获取位置信息失败：请开启定位服务，进入系统【设置】>【隐私】>【定位服务】中打开开关!");
} else {
map.setCenter(point);
geoInf(point);
}
} else {
mui.toast("获取位置信息失败：请开启定位服务，进入系统【设置】>【隐私】>【定位服务】中打开开关!");
}
});
}
function geoInf(point) {
plus.maps.Map.reverseGeocode(point, {}, function(event) {
//获取当前地理位置
addressd = event.address; // 转换后的地理位置
var longit = point.longitude;//
var latid = point.latitude; //纬度
});
}
</script>
</body>
</html>
以上是关于mui 地图轨迹回放的主要内容，如果未能解决你的问题，请参考以下文章