html5 导航路线规划开启导航功能
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>巴哥出行代驾任务管理</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="http://wx.bagechuxing.cn/static/js/jquery.min.js"></script>
<script type="text/javascript" src="http://wx.bagechuxing.cn/static/js/mobile/layer.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=c44bdfa70eed258da5a2b82bcf944059&plugin=AMap.MouseTool"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=c44bdfa70eed258da5a2b82bcf944059&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=c44bdfa70eed258da5a2b82bcf944059&plugin=AMap.Walking"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cw08qbyVZzbEhXGBwmmG5WsGad0ENq4q"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/upload.js"></script>
<style>
*{
-webkit-appearance: none;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(1.0) }
100% {
-webkit-transform: scale(1.1);
opacity: 0.5;
}
}
@keyframes scaleout {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
} 100% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.5;
}
}
*:focus { outline: none; }
html,body
{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-x:hidden;
overflow-y:auto;
}
#body img{
max-width:100% !important;
}
.marker {
display: inline-block;
width: 42px;
height: 42px;
background: transparent url("../../img/car.png") no-repeat;
background-size: 100% 100%;
color: #F0F0F0;
text-align: center;
font-size: 12px;
line-height: 42px;
vertical-align:middle;
}
.marker1 {
display: inline-block;
width: 42px;
height: 42px;
background: transparent url("../../img/electricize.png") no-repeat;
background-size: 100% 100%;
color: #F0F0F0;
text-align: center;
font-size: 12px;
line-height: 42px;
vertical-align:middle;
}
.marker i{
display: inline-block;
background: #255ebc;
border: 1px solid #F0F0F0;
border-radius: 6px;
padding: 1px;
color: #FFFFFF;
font-style: normal;
top: -24px;
left: -5px;
height: 16px;
line-height: 16px;
font-size: 9px;
position: relative;
cursor: pointer;
white-space: nowrap;
}
.toolbox{
position:fixed;
bottom:10px;
width:100%;
height:30px;
line-height:30px;
text-align:center;
z-index:9999;
}
.toolbox a{
display:inline-block;
padding:0px 10px;
background:#FFFFFF;
border:1px solid #666666;
border-radius:2px;
text-decoration:none;
color:#666666;
}
.toolbox a.sel{
background:#1fb517;
color:#FFFFFF;
border:1px solid #1fb517;
}
.moving1{
background: transparent url("/static/images/car2.png") no-repeat;
-webkit-animation: scaleout 1.3s infinite ease-in-out;animation: scaleout 1.3s infinite ease-in-out;
}
.city {
display: inline-block;
width: 60px;
height: 60px;
line-height:60px;
text-align:center;
border: 1px solid #1a9e14;
border-radius:48px;
color: #1a9e14;
background:#FFFFFF url("/static/images/logo.png") no-repeat;
background-size: 100% 100%;
text-align: center;
font-size: 14px;
line-height: 60px;
vertical-align:middle;
}
.city i{
display: inline-block;
background: #fef11e;
border: 1px solid #545454;
border-radius: 6px;
padding: 1px;
color: #000000;
font-style: normal;
height: 16px;
line-height: 16px;
font-size: 9px;
cursor: pointer;
white-space: nowrap;
}
#titlebox{
position:fixed;
top:0px;
text-align:center;
width:100%;
line-height:28px;
}
#titlebox span{
display:inline-block;
padding:0px 5px;
background:#009900;
box-shadow:1px 2px 2px #676367;
color:#FFFFFF;
opacity:0.8;
}
.logo{
width:100%;
magin:30px auto;
text-align:center;
}
.logo img{
margin-top:80px;
}
.inputbox{
line-height:36px;
width:99%;
display:block;
}
.inputbox .input{
border:0px;
border-bottom:1px solid #E0E0E0;
color:#CCCCCC;
width:98%;
height:28px;
margin-left: 1%;
border-radius:0px !important;
font-size:0.9rem;
}
.inputbox .button{
position: relative;
top: -28px;
float: right;
border: 0px;
background: transparent;
color: #1a9e14;
}
.inputbox .confirm{
width: 65%;
background: rgb(45,170,62);
color: #FFFFFF;
height: 42px;
line-height: 42px;
border: 1px solid rgb(45,170,62);
border-radius: 6px;
margin-top:40px;
font-size:0.9rem;
position:fixed;
bottom:10px;
left:1%;
}
.inputbox .confirm1{
color: #FFFFFF;
width: 30%;
width: 30%;
background: rgb(91,91,91);
height: 42px;
line-height: 42px;
border: 1px solid rgb(91,91,91);
border-radius: 6px;
margin-top:40px;
margin-left:830px;
font-size:0.9rem;
position:fixed;
bottom:10px;
right:1%;
}
.btn {
display: inline-block;
margin-top: 10px;
border: 0px solid #1a9e14;
border-radius: 80px;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
color: #ffffff;
margin: 20px 5px;
font-size: 1.3rem;
vertical-align: middle;
opacity: 0.9;
}
.btn:hover {
background2:#1aE014;
}
.control{
text-align:center;
}
.info{
color:#A0A0A0;
}
#content{
text-align:center;
width:100%;
height:100%;
}
#mapcontainer{
width:100%;
height:45%;
margin:0px;
padding:0px;
}
.info{
color:#A0A0A0;
width:100%;
padding:10px 10px;
text-align:left;
font-size:0.9rem;
}
.info>h3{
font-size:1rem;
text-align:center;
width:100%;
}
.info ul{
list-style:none;
padding:0px;
margin:0px;
font-size:0.9rem;
}
.info ul li{
list-style:none;
line-height: 1.4rem;
}
.info span{
margin-right:15px;
color:#7d7d7d;
}
.ainfo span{
color:#393939;
}
.ainfo .title{
display:inline-block;
color:#838383;
width:50px;
overflow:hidden;
display:inline-block;
}
.ainfo .text{
display:inline-block;
width:100px;
overflow:hidden;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.helplink{
color:rgb(45,170,62);
background:#
}
.control{
width:300px;
height:154px;
margin:-16px auto;
background:url("../../img/ctlbg.png") no-repeat;
background-size:100% 100%;
}
.control .btn1{
width:80px;
height:80px;
margin:28px auto;
background:url("../../img/bt_1.png") no-repeat;
background-size:100% 100%;
margin-left: 2px;
}
.control .btn2{
width:100px;
height:100px;
margin:0 auto;
background:url("../../img/bt_2.png") no-repeat;
background-size:100% 100%;
}
.control .btn3{
width:80px;
height:80px;
margin:0 auto;
background:url("../../img/bt_3.png") no-repeat;
background-size:100% 100%;
margin-right: 2px;
}
.ainfo .upload{
border: 1px solid #808080;
padding:3px 5px;
text-align:center;
border-radius:3px;
}
#snap{
border:1px solid #888888;
border-radius:2px;
}
</style>
</head>
<body id='body' onselectstart="return false">
<div id="content">
<input type="hidden" id="openid" name="openid" value="{{openid}}" />
<input type="hidden" id="carid" name="carid" value="{{carid}}" />
<input type="hidden" id="code" name="code" value="{{carid}}" />
<div id="mapcontainer" class="mapcontainer"></div>
<p class="info ainfo">
<span class="title">车牌号: </span><span class="text" id="plateNum"></span>
<span class="title">电量: </span><span class="text" id="electricity"></span></br>
<span class="title">类型: </span><span class="text" id="dm">充电</span>
<span class="title">续航: </span><span class="text" id="mileage"></span></br>
<span class="title">停车费: </span><input name="businesslicense_u" class="file" id="businesslicense_u" type="file" accept="image/*" capture="camera">
</br>
</p>
<div class="control">
<span class="btn btn1" onclick="controlCar(0)">
<!-- 寻车 -->
</span>
<span class="btn btn2" onclick="controlCar(1)">
<!-- 开车-->
</span>
<span class="btn btn3" onclick="controlCar(2)">
<!-- 锁车-->
</span>
</div>
<p><a class="helplink" href="./fault.jsp">简易故障排除说明</a></p>
<p class="contact">联系电话: <span id="contactphone"></span></p>
<div class="inputbox" style="margin-top: 30px;">
<input type="button" name="sbt" class="confirm" value="完成任务" onclick="finishTask();" />
<input type="button" name="sbt" class="confirm1" value="故障完成" onclick="faultFinishTask()" />
</div>
</div>
<script type="text/javascript">
var wxcanpay = false;
var orderid = "<%=request.getSession().getAttribute("orderid")%>";
var taskid = "<%=request.getSession().getAttribute("taskid")%>";
var token = "<%=request.getSession().getAttribute("token")%>";
var verifyCode = "<%=request.getSession().getAttribute("verifyCode")%>";
var sn = "0";
var imgUrl = "";
var imgUrlTwo = "";
var accidentType = "";
var parkid = "";
var branchid = "";
var map = new AMap.Map("mapcontainer", {
resizeEnable: true,
zoom: 10,
mapStyle: "whitesmoke",
});
map.setMapStyle('amap://styles/whitesmoke');
lnglatXY = [116.403582, 39.923605];
var currentPos = {lat:39.923605,lon:116.403582};
var currentPosType = 0;
var markers = {};
function showTip(content)
{
layer.open({
content: content
,skin: 'msg'
,time: 2
});
}
function finishTask(){
var imgUrl = $("#businesslicense_u").val();
if($("#businesslicense_u").val()==""){
showTip("请先上传停车费照片");
return;
}else{
$.ajaxFileUpload({
url:"<%=request.getContextPath()%>/upload", //需要链接到服务器地址
secureuri:false,
fileElementId:"businesslicense_u", //上传文件选择框的id属性
dataType: 'text', //json，与后台对应，text和json
success: function (data) { //后台ajax返回的数据 此处Imgurl
} ,error:function(XMLHttpRequest, textStatus, errorThrown){
alert('上传失败！');
}
});
var path = '/bagechuxing/agent/finishTask';
var params = $.param({ "taskid": taskid,"orderid":orderid,"accidentType":"1","businesslicense_u":imgUrl});
$.post(path,params,function(result){
var result = eval('(' + result + ')');
if (result.code=="10000") {
if($("#code").val()!=null && $("#code").val()!=""){
alert("验证码："+$("#code").val()+"");
}
showTip("任务已完成");
$("#content").html(str);
}else if(result.code=="10002"){
showTip("请先操作开锁功能");
}else{
showTip(result.message)
}
});
}
}
function faultFinishTask(){
var path = '/bagechuxing/agent/faultFinishTask';
var params = $.param({ "taskid": taskid});
$.post(path,params,function(result){
var result = eval('(' + result + ')');
if (result.code=="10000") {
//$("#content").html("故障上报成功");
showTip("故障上报成功");
}else if(result.code=="1"){
showTip(result.message);
}else{
//$("#content").html("故障上报失败");
showTip("故障上报失败");
}
});
}
function controlCar(type){
var url = "/bagechuxing/agent/control?type="+type+"&orderid="+orderid+"&taskid="+taskid+"&token="+token;
$.ajax({
type : "GET",
url : url,
dataType : "json",
success : function(data) {
showTip(data.message);
},
error : function(err) {
alert(err);
}
});
}
function getvehicleinfo(verifyCode,token){
var url = "/bagechuxing/agent/getvehicleinfo?orderId="+orderid+"&verifyCode="+verifyCode+"&token="+token;
$.ajax({
type : "GET",
url : url,
dataType : "json",
success : function(data) {
$("#electricity").html(data.electricity+"%");
$("#mileage").html(data.mileage+"公里");
$("#plateNum").html(data.plateNum);
$("#contactphone").html(data.parkPhone);
$("#code").val(verifyCode);
var marker = new AMap.Marker({
position: [data.longitude,data.latitude],
topWhenClick: true,
content: "<span class='marker'></span>",//地图点显示车辆图标
icon: new AMap.Icon({
size: new AMap.Size(45, 45),
imageOffset: new AMap.Pixel(0, 0)
}),
extData: data.sn
});
var marker1 = new AMap.Marker({
position: [data.electricityLng, data.electricityLat],
topWhenClick: true,
content: "<span class='marker1'></span>",//地图点显示车辆图标
icon: new AMap.Icon({
size: new AMap.Size(45, 45),
imageOffset: new AMap.Pixel(0, 0)
}),
extData: data.sn
});
//步行导航
var walking = new AMap.Walking({
map: map,
panel: ""//路线名称图不显示
});
var walking1 = new AMap.Walking({
map: map,
panel: ""//路线名称图不显示
});
//根据起终点坐标规划步行路线
walking.search([data.driverLongitude, data.driverLatitude], [data.longitude, data.latitude]);
walking1.search([data.longitude, data.latitude], [data.electricityLng, data.electricityLat]);
marker.on('click', function(e) {//点击车辆位置进入导航
//alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
marker.markOnAMAP({//进入导航开始
name:data.address,
position:marker.getPosition()
});
});
marker1.on('click', function(e) {//点击充电站位置进入导航
marker1.markOnAMAP({//进入导航开始
name:data.elecAddress,
position:marker1.getPosition()
});
});
marker.setMap(map);
marker1.setMap(map);
map.setFitView();
},
error : function(err) {
}
});
}
function success()
{
$("#content").html("完成任务成功");
}
$(document).ready(function(){
getvehicleinfo(verifyCode,token);
getOrderPrice();
});
</script>
<script type="text/javascript">
document.querySelector('body').addEventListener('touchmove', function (ev) {
event.preventDefault();
});
</script>
</body>
</html>
