html5 导航路线规划开启导航功能

zoukankan html css js c++ java

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
{
   100%;
   height:100%;
   margin:0px;
   padding:0px;
   overflow-x:hidden;
   overflow-y:auto;
}
#body img{
    max-100% !important;
}
.marker {
  display: inline-block;
   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;
   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;
  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;
   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;
    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{
    100%;
    magin:30px auto;
    text-align:center;
}

.logo img{
    margin-top:80px;
}

.inputbox{
    line-height:36px;
    99%;
    display:block;
}

.inputbox .input{
    border:0px;
    border-bottom:1px solid #E0E0E0;
    color:#CCCCCC;
    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{
   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;
   30%;
   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;
   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;
    100%;
    height:100%;
}

#mapcontainer{
    100%;
    height:45%;
    margin:0px;
    padding:0px;
}
.info{
    color:#A0A0A0;
    100%;
    padding:10px 10px;
    text-align:left;
    font-size:0.9rem;
}

.info>h3{
    font-size:1rem;
    text-align:center;
    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;
    50px;
    overflow:hidden;
    display:inline-block;
}

.ainfo .text{
    display:inline-block;
    100px;
    overflow:hidden;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.helplink{
    color:rgb(45,170,62);
    background:#
}

.control{
    300px;
    height:154px;
    margin:-16px auto;
    background:url("../../img/ctlbg.png") no-repeat;
    background-size:100% 100%;
}

.control .btn1{
    80px;
    height:80px;
    margin:28px auto;
    background:url("../../img/bt_1.png") no-repeat;
    background-size:100% 100%;
    margin-left: 2px;
}

.control .btn2{
    100px;
    height:100px;
    margin:0 auto;
    background:url("../../img/bt_2.png") no-repeat;
    background-size:100% 100%;
}

.control .btn3{
    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>

查看全文

相关阅读:
Core Animation简介
 objective-c 常用函数、变量
 NSString判断纯数字
 自定义对话框AlterView
IOS 6 自动布局入门－1（IOS中autolayout和之前版本autoresize的差异）
真机调试问题错误集合
 block使用小结、在arc中使用block、如何防止循环引用
 View和viewController的生命周期
 IOS侧滑和webview
Linker Error、MRC与ARC、导航条背景

原文地址：https://www.cnblogs.com/cuijinlong/p/7568804.html