百度api 轨迹
2016-06-25 14:17
225 查看
jsp
-------------------------------------------------------------------------------------------------------------------------------------------------------------
/* <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<style>
.anchorBL{display:none;}
</style>
<head>
<%@include file="../../public/public_head.jsp"%>
<title>民盛保全管理</title>
</head>
<body>
<div class="box">
<%@include file="../../public/public_side.jsp"%>
<div class="main">
<%@include file="../../public/public_title.jsp"%>
<div class="crumbs">
<ul>
<li><i class="iconfont icon-zhuye"></i> 首页</li>
<li>轨迹管理</li>
</ul>
</div>
<div class="body">
<div class="theme_lay">
<div class="theme">
<label class="main_theme">轨迹管理</label>
</div>
</div>
<div class="search_lay">
<div class="search_div">
<input type="text" id="time" onClick="WdatePicker({skin:'ext',dateFmt:'yyyy-MM-dd'})" readonly="readonly" placeholder="请选择查询时间" />
<button type="button" onclick="getTrack()" class="btn_blue">条件搜索</button>
<button class="btn_blue" onclick="startlushu()">回放</button>
<button class="btn_blue" onclick="endlushu()">停止</button>
<button class="btn_blue" onclick="pauselushu()">暂停</button>
</div>
</div>
<div class="reply">
</div>
<div class="table_lay">
<input type="hidden" id="id" value="${id}">
<input type="hidden" id="staffName" value="${staffName}">
<div id="map">
</div>
</div>
</div>
</div>
</div>
<%@include file="../../public/public_script.jsp"%>
<script src="${ctx}/static/js/public/public_list.js"></script>
<script src="${ctx}/static/js/mobile/track/track.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IjxTWKGAosKnr6vXEGZc9qMUYAqb8u4q"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/mobile/track/map.js"></script>
<script type="text/javascript" src="${ctx }/static/js/My97DatePicker/WdatePicker.js"></script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
map.js
/**
* mapJs author:kfc
*/
var lushu;
$(function(){
getTrack();
});
function getTrack(){ //ajax 返回List<String> string(lng,lat)
var array = new Array();
array[0]='1';
var id = $("#id").val();
var staffName = $("#staffName").val();
var time = $("#time").val();
if(id!=null){
$.ajax({
type: "post",
url:ctx+"/track/queryTrack",
data: {"id":id,"time":time},
dataType: "json",
async:false,//同步为了使用方法内局部变量 array
success: function(data){
if(data.result==1){
$.each(data.list,function(i,item){
array[i]=item;
});
}else{
alert("系统尚未记录或系统异常,获取轨迹失败");
}
}
});
}
var bmap = document.getElementById('map');
bmap.style.width = '100%';
bmap.style.height = '600px';
/* if (mapWidth < 500){
var zoom = 9;
} else {
var zoom = 10;
}*/
var map = new BMap.Map("map");
var location = array[0].split(',');
var point = new BMap.Point(location[0],location[1]);
var km = 0;
var points = [];
for(var i=0;i<array.length;i++){
var location = array[i].split(',');
points[i]= new BMap.Point(location[0],location[1]);
}
for(var i=0;i<array.length-1;i++){
var location = array[i].split(',');
var location1 = array[i+1].split(',');
km+=getDisance(location[1],location[0],location1[1],location1[0]);
}
var markers = [
points[0],//饶平站
points[points.length-1]//葵潭站
];
var icon1 = new BMap.Icon('http://source.fooleap.org/marker.png', new BMap.Size(23,25),{anchor: new BMap.Size(11, 25)});
var icon2 = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));
//var icon3 = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/dest_markers.png',new BMap.Size(42, 34),{offset: new BMap.Size(14, 32),imageOffset: new BMap.Size(0, 0 - 0 * 34)});
var polyline = new BMap.Polyline(points);
lushu = new BMapLib.LuShu(map, points, {
landmarkPois:[
/* {lng:markers[0].lng,lat:markers[0].lat,html:'饶平站到了',pauseTime:1},
{lng:markers[1].lng,lat:markers[1].lat,html:'<img src="http://source.fooleap.org/chaoshan.jpg?imageView2/2/w/150" />潮汕站到了',pauseTime:2},
{lng:markers[2].lng,lat:markers[2].lat,html:'潮阳站到了',pauseTime:1},
{lng:markers[3].lng,lat:markers[3].lat,html:'普宁站到了',pauseTime:1},
{lng:markers[4].lng,lat:markers[4].lat,html:'葵潭站到了',pauseTime:1}*/
],
c136
defaultContent: staffName+'在移动',
speed: 10000,
icon: icon2,
autoView: false,
enableRotation: false
});
map.addOverlay(polyline);
//map.addOverlay(new BMap.Marker(markers[i],{icon:icon3}));
for (i=0;i<markers.length;i++){
map.addOverlay(new BMap.Marker(markers[i],{icon:icon1}));
}
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(60, -30) //设置文本偏移量
}
var label = new BMap.Label("业务员:"+staffName+"当天共行驶了"+Math.ceil(km/1000)+"公里", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "13px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT});// 左上角，添加比例尺
//var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
/*缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
//var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});
var overView = new BMap.OverviewMapControl();
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
map.addOverlay(label); //增加文本标注
map.addControl(top_left_control);
//map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
//map.addControl(mapType1); //2D图，卫星图
map.addControl(mapType2); //左上角，默认地图控件
//map.setCurrentCity("北京"); //由于有3D图，需要设置城市哦
map.addControl(overView); //添加默认缩略地图控件
map.addControl(overViewOpen); //右下角，打开
map.centerAndZoom(point, 12);
map.enableScrollWheelZoom();
map.addEventListener("click",startlushu);
}
function startlushu(){
lushu.start();
}
function endlushu(){
lushu.stop();
}
function pauselushu(){
lushu.pause();
}
function toRad(d) { return d * Math.PI / 180; }
function getDisance(lat1, lng1, lat2, lng2) {// #lat为纬度, lng为经度, 一定不要弄错
var dis = 0;
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
return dis * 6378137;
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- java 计算gps距离
//计算多点之间的距离公里
public static String calc(List<String> list){
double d = 0;
for(int i=0;i<list.size()-1;i++){
String lngAndLat [] = list.get(i).split(",");
String lngAndLat1 [] = list.get(i+1).split(",");
d+=Distance(Double.parseDouble(lngAndLat[0]), Double.parseDouble(lngAndLat[1]), Double.parseDouble(lngAndLat1[0]), Double.parseDouble(lngAndLat1[1]));
}
return String.valueOf(Math.ceil(d/1000)).substring(0,String.valueOf(Math.ceil(d/1000)).length()-2);
}
//计算两点之间的距离米（lng,lat）
public static double Distance(double long1, double lat1, double long2,
double lat2) {
double a, b, R;
R = 6378137; // 地球半径
lat1 = lat1 * Math.PI / 180.0;
lat2 = lat2 * Math.PI / 180.0;
a = lat1 - lat2;
b = (long1 - long2) * Math.PI / 180.0;
double d;
double sa2, sb2;
sa2 = Math.sin(a / 2.0);
sb2 = Math.sin(b / 2.0);
d = 2
* R
* Math.asin(Math.sqrt(sa2 * sa2 + Math.cos(lat1)
* Math.cos(lat2) * sb2 * sb2));
return d;
}
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------
/* <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<style>
.anchorBL{display:none;}
</style>
<head>
<%@include file="../../public/public_head.jsp"%>
<title>民盛保全管理</title>
</head>
<body>
<div class="box">
<%@include file="../../public/public_side.jsp"%>
<div class="main">
<%@include file="../../public/public_title.jsp"%>
<div class="crumbs">
<ul>
<li><i class="iconfont icon-zhuye"></i> 首页</li>
<li>轨迹管理</li>
</ul>
</div>
<div class="body">
<div class="theme_lay">
<div class="theme">
<label class="main_theme">轨迹管理</label>
</div>
</div>
<div class="search_lay">
<div class="search_div">
<input type="text" id="time" onClick="WdatePicker({skin:'ext',dateFmt:'yyyy-MM-dd'})" readonly="readonly" placeholder="请选择查询时间" />
<button type="button" onclick="getTrack()" class="btn_blue">条件搜索</button>
<button class="btn_blue" onclick="startlushu()">回放</button>
<button class="btn_blue" onclick="endlushu()">停止</button>
<button class="btn_blue" onclick="pauselushu()">暂停</button>
</div>
</div>
<div class="reply">
</div>
<div class="table_lay">
<input type="hidden" id="id" value="${id}">
<input type="hidden" id="staffName" value="${staffName}">
<div id="map">
</div>
</div>
</div>
</div>
</div>
<%@include file="../../public/public_script.jsp"%>
<script src="${ctx}/static/js/public/public_list.js"></script>
<script src="${ctx}/static/js/mobile/track/track.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IjxTWKGAosKnr6vXEGZc9qMUYAqb8u4q"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/mobile/track/map.js"></script>
<script type="text/javascript" src="${ctx }/static/js/My97DatePicker/WdatePicker.js"></script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
map.js
/**
* mapJs author:kfc
*/
var lushu;
$(function(){
getTrack();
});
function getTrack(){ //ajax 返回List<String> string(lng,lat)
var array = new Array();
array[0]='1';
var id = $("#id").val();
var staffName = $("#staffName").val();
var time = $("#time").val();
if(id!=null){
$.ajax({
type: "post",
url:ctx+"/track/queryTrack",
data: {"id":id,"time":time},
dataType: "json",
async:false,//同步为了使用方法内局部变量 array
success: function(data){
if(data.result==1){
$.each(data.list,function(i,item){
array[i]=item;
});
}else{
alert("系统尚未记录或系统异常,获取轨迹失败");
}
}
});
}
var bmap = document.getElementById('map');
bmap.style.width = '100%';
bmap.style.height = '600px';
/* if (mapWidth < 500){
var zoom = 9;
} else {
var zoom = 10;
}*/
var map = new BMap.Map("map");
var location = array[0].split(',');
var point = new BMap.Point(location[0],location[1]);
var km = 0;
var points = [];
for(var i=0;i<array.length;i++){
var location = array[i].split(',');
points[i]= new BMap.Point(location[0],location[1]);
}
for(var i=0;i<array.length-1;i++){
var location = array[i].split(',');
var location1 = array[i+1].split(',');
km+=getDisance(location[1],location[0],location1[1],location1[0]);
}
var markers = [
points[0],//饶平站
points[points.length-1]//葵潭站
];
var icon1 = new BMap.Icon('http://source.fooleap.org/marker.png', new BMap.Size(23,25),{anchor: new BMap.Size(11, 25)});
var icon2 = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));
//var icon3 = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/dest_markers.png',new BMap.Size(42, 34),{offset: new BMap.Size(14, 32),imageOffset: new BMap.Size(0, 0 - 0 * 34)});
var polyline = new BMap.Polyline(points);
lushu = new BMapLib.LuShu(map, points, {
landmarkPois:[
/* {lng:markers[0].lng,lat:markers[0].lat,html:'饶平站到了',pauseTime:1},
{lng:markers[1].lng,lat:markers[1].lat,html:'<img src="http://source.fooleap.org/chaoshan.jpg?imageView2/2/w/150" />潮汕站到了',pauseTime:2},
{lng:markers[2].lng,lat:markers[2].lat,html:'潮阳站到了',pauseTime:1},
{lng:markers[3].lng,lat:markers[3].lat,html:'普宁站到了',pauseTime:1},
{lng:markers[4].lng,lat:markers[4].lat,html:'葵潭站到了',pauseTime:1}*/
],
c136
defaultContent: staffName+'在移动',
speed: 10000,
icon: icon2,
autoView: false,
enableRotation: false
});
map.addOverlay(polyline);
//map.addOverlay(new BMap.Marker(markers[i],{icon:icon3}));
for (i=0;i<markers.length;i++){
map.addOverlay(new BMap.Marker(markers[i],{icon:icon1}));
}
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(60, -30) //设置文本偏移量
}
var label = new BMap.Label("业务员:"+staffName+"当天共行驶了"+Math.ceil(km/1000)+"公里", opts); // 创建文本标注对象
label.setStyle({
color : "red",
fontSize : "13px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT});// 左上角，添加比例尺
//var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
/*缩放控件type有四种类型:
BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
//var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});
var overView = new BMap.OverviewMapControl();
var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
map.addOverlay(label); //增加文本标注
map.addControl(top_left_control);
//map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
//map.addControl(mapType1); //2D图，卫星图
map.addControl(mapType2); //左上角，默认地图控件
//map.setCurrentCity("北京"); //由于有3D图，需要设置城市哦
map.addControl(overView); //添加默认缩略地图控件
map.addControl(overViewOpen); //右下角，打开
map.centerAndZoom(point, 12);
map.enableScrollWheelZoom();
map.addEventListener("click",startlushu);
}
function startlushu(){
lushu.start();
}
function endlushu(){
lushu.stop();
}
function pauselushu(){
lushu.pause();
}
function toRad(d) { return d * Math.PI / 180; }
function getDisance(lat1, lng1, lat2, lng2) {// #lat为纬度, lng为经度, 一定不要弄错
var dis = 0;
var radLat1 = toRad(lat1);
var radLat2 = toRad(lat2);
var deltaLat = radLat1 - radLat2;
var deltaLng = toRad(lng1) - toRad(lng2);
var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
return dis * 6378137;
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- java 计算gps距离
//计算多点之间的距离公里
public static String calc(List<String> list){
double d = 0;
for(int i=0;i<list.size()-1;i++){
String lngAndLat [] = list.get(i).split(",");
String lngAndLat1 [] = list.get(i+1).split(",");
d+=Distance(Double.parseDouble(lngAndLat[0]), Double.parseDouble(lngAndLat[1]), Double.parseDouble(lngAndLat1[0]), Double.parseDouble(lngAndLat1[1]));
}
return String.valueOf(Math.ceil(d/1000)).substring(0,String.valueOf(Math.ceil(d/1000)).length()-2);
}
//计算两点之间的距离米（lng,lat）
public static double Distance(double long1, double lat1, double long2,
double lat2) {
double a, b, R;
R = 6378137; // 地球半径
lat1 = lat1 * Math.PI / 180.0;
lat2 = lat2 * Math.PI / 180.0;
a = lat1 - lat2;
b = (long1 - long2) * Math.PI / 180.0;
double d;
double sa2, sb2;
sa2 = Math.sin(a / 2.0);
sb2 = Math.sin(b / 2.0);
d = 2
* R
* Math.asin(Math.sqrt(sa2 * sa2 + Math.cos(lat1)
* Math.cos(lat2) * sb2 * sb2));
return d;
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 异常通知辅助模块 5.3 (try/catch)
- C++高质量编程点滴
- mysql5.7.13免安装版超详细安装教程
- 去除挖宝报毒的问题，修改基础包的java代码，并且打包
- php 面试题（1）
- C++非面向对象的特征
- Adapter类型控件之ListView（列表控件）
- struts2点点
- C++中的结构体与sizeof
- map任务数量控制
- Unit Test - Level 2
- android studio 启动错误
- POI开发入门（四）遍历Excel 和文本提取
- 快看看你躺枪了吗？最全搞笑中式英语大集合
- 在ubuntu下，进行php7源码安装
- poj2186 强连通缩点
- C++中建立对象间消息连接的系统方法
- code-push 交互式命令行脚本
- svn通信项目文件收发
- KafKa（0.10）安装部署和测试