1 Star 0 Fork 2

panwan1483/畅行吉林_hzs

forked from celticsv5/畅行吉林_hzs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
my_kyz.html 15.12 KB
一键复制 编辑 原始数据 按行查看 历史
13601014569 提交于 2018-08-28 22:56 . 上传项目hzs就是我
<!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" type="text/css" href="css/all_css.css" />
<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
<link rel="stylesheet" type="text/css" href="lib/weui.css" />
<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
<style type="text/css">
#kyz_main {
max-width: 640px;
min-width: 320px;
margin: 0px auto;
/*padding-bottom: 55px;*/
}
.app_head_left {
float: left;
width: 15%;
padding-top: 6px;
padding-left: 6px;
}
.app_head_left a {
color: #FFFFFF;
font-size: 1.5em;
font-weight: bold;
}
.app_head_mid {
float: left;
width: 70%;
padding-top: 5px;
}
#app_head_title {
text-align: center;
color: #FFFFFF;
font-size: 1.55em;
font-family: "宋体";
font-weight: bold;
}
#allmap {
width: 100%;
}
/*导航栏样式*/
.weui_bar_item_on {
background-color: #FFFFFF !important;
color: #0070B4 !important;
}
.weui_navbar_item {
color: #FFFFFF;
background-color: #CCCCCC;
}
.weui_navbar_item b {
display: block;
font-size: 1.1em;
height: 1.5em;
line-height: 1.5em;
border-right: 1px solid #FFFFFF;
}
/* 搜索框区域样式 */
.sec_line {
width: 100%;
background-color: #F5F5F5;
padding: 7px 0px;
border-bottom: 1px solid #DEDEDE;
}
#InputLine {
margin-left: 2%;
margin-right: 2%;
width: 96%;
border: 1px solid #DEDEDE;
border-radius: 7px;
height: 44px;
background-color: #FFFFFF;
opacity: 0.92;
}
#tollStation_suggestId {
padding-left: 1em;
width: 89%;
height: 100%;
border: none;
outline: medium;
border-radius: 5px;
color: #969696;
font-size: 1.15em;
font-weight: bold;
}
#searchBtn {
display: block;
float: right;
width: 8.5%;
padding-right: 10px;
color: #666666;
font-size: 2em;
text-align: right;
position: relative;
left: -5px;
}
#delBtn {
display: block;
float: right;
position: relative;
top: -42px;
width: 5%;
text-align: right;
font-size: 1.1em;
line-height: 40px;
margin-right: 3px;
}
/* loading样式 */
#loadingSFZ {
width: 8%;
margin-left: 46%;
margin-right: 46%;
margin-top: 90px;
}
/* ul li 列表样式 */
#tollStationAll_Ul li:nth-child(2n) {
background-color: #F2AF1F;
color: #FFFFFF;
opacity: 0.6;
}
#tollStationAll_Ul li {
color: #666666;
padding: 10px;
padding-left: 20px;
width: 100%;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#noResult {
width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-top: 90px;
color: #999999;
font-size: 2em;
text-align: center;
}
/*#tollStationAll_Ul li:last-child{
border: none;
}*/
.BMap_bubble_title {
color: #0070B4 !important;
font-weight: bold;
font-size: 1.1em;
}
/* 返回顶部按钮 */
.returnTopBtn {
position: fixed;
right: 15px;
bottom: 80px;
width: 45px;
height: 43px;
border-radius: 8px;
z-index: 9999;
background-color: #CCCCCC;
padding: 6px;
}
.weui_tab {
margin-top: 20px;
}
#bgDiv {
position: fixed;
top: 70px;
width: 100%;
background-image: url(img/passenger/passenger_bgi.png);
background-size: 150% 250%;
background-position: 20% 110%;
background-repeat: no-repeat;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
}
.clickTel {
color: #0070B4;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>
</head>
<body ontouchstart>
<div id="kyz_main">
<div id="bgDiv"></div>
<div class="index_head" id="firTitle">
<div class="app_head_left">
<a id="fwqPrevBtn" class="iconfont">&#xe6d4;</a>
</div>
<div class="app_head_mid">
<p id="app_head_title">省内客运站</p>
</div>
</div>
<div class="weui_tab">
<!--选择步行公交自驾按钮区域-->
<div class="weui_navbar" id="secTitle">
<a href="#tollStation_ss" class="weui_navbar_item weui_bar_item_on" id="chooseSS"><b>搜索</b></a>
<a href="#tollStation_map" class="weui_navbar_item" id="chooseMap"><b>地图</b></a>
</div>
<div class="weui_tab_bd">
<div id="tollStation_ss" class="weui_tab_bd_item weui_tab_bd_item_active">
<div class="sec_line">
<div id="InputLine">
<input onpaste="return false;" type="text" id="tollStation_suggestId" maxlength="20" placeholder="请输入客运站名称" />
<!--<a id="delBtn" href="javascript:;" class="iconfont" style="display: none;">&#xe60b;</a>-->
<a id="searchBtn" href="javascript:;" class="iconfont">&#xe709;</a>
</div>
</div>
<ul id="tollStationAll_Ul">
<!--<li>公主岭收费站</li>
<li>长春绕城高速收费站</li>
<li>公主岭收费站</li>
<li>长春绕城高速收费站</li>
<li>公主岭收费站</li>
<li>长春绕城高速收费站</li>-->
</ul>
<img src="img/taxi/loading_icon_1.gif" id="loadingSFZ" />
<h1 id="noResult" style="display: none;">搜索无结果</h1>
</div>
<div id="tollStation_map" class="weui_tab_bd_item">
<div id="allmap"></div>
</div>
</div>
</div>
</div>
<img src="img/index/returnTop2.png" style="display: none;" class="returnTopBtn" />
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var map = new BMap.Map("allmap");
$(function() {
var h = window.screen.availHeight - 70;
$("#allmap").height(h);
$("#bgDiv").height(h - 50);
var point = new BMap.Point(125.10973333, 44.09094444); //地图加载时位于长春市中心点
map.centerAndZoom(point, 11);
getAllBusStation(2, "", "");
});
//输入框输入信息触发事件
var timeout;
$("#tollStation_suggestId").keyup(function() {
var linkName = $(this).val();
var pattern = /^[\u4e00-\u9fa5]*$/;
if(!pattern.test(linkName)) {
$.alert("请输入中文", "提示", function() {
$("#tollStation_suggestId").val("");
});
} else {
$("#noResult").hide();
$("#tollStationAll_Ul").html("");
$("#loadingSFZ").show();
if($(this).val() == "") {
//输入框内容为空时 ul中显示所有收费站名称
//清空所有li
clearTimeout(timeout);
timeout = setTimeout(function() {
getAllBusStation(2, "", "");
}, 800);
} else {
clearTimeout(timeout);
timeout = setTimeout(function() {
getAllBusStation(2, "", $("#tollStation_suggestId").val());
}, 800);
}
}
});
//方法:获取客运站接口
function getAllBusStation(flag, city, staName) {
$("#tollStationAll_Ul").html("");
$("#noResult").hide();
$.ajax({
type: "post",
url: Url,
data: {
"type": "bus_station",
"CITYNAME": city,
"STANAME": staName,
"FLAG": flag
},
async: false,
cache: false,
dataType: "jsonp", //数据类型为jsonp
jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
jsonpCallback: "jsonpCallback1",
success: function(data) {
if(data.CODE == 0) {
$("#loadingSFZ").hide();
$("#noResult").show();
} else {
var d = data.DATA;
var m = data.MDATA;
if(isEncrypt(d, m)) {
d = eval(d);
$("#loadingSFZ").hide();
for(var i = 0; i < d.length; i++) {
var dz = d[i].ADDRESS; //地址
var tel = d[i].TEL; //电话
var ysq = d[i].YSTS + "天(具体预售期请以汽车站实际为准)"; //预售期
var bus = d[i].BUSROUTE; //公交
var ds = d[i].DSZT; //开通代售
var time = d[i].YYKSSJ.substr(0, 5) + "-" + d[i].YYJSSJ.substr(0, 5); //运营时间
var ck = d[i].QPDD; //取票窗口
var staLi = $('<li onclick="jumpToKyz(this)" data-1="' + dz + '" data-2="' + tel + '" data-3="' + ysq + '" data-4="' + bus + '" data-5="' + ds + '" data-6="' + time + '" data-7="' + ck + '">' + d[i].KYZMC + '' + d[i].CITYNAME + '' + '</li>');
$("#tollStationAll_Ul").append(staLi);
}
} else {
errMD();
}
}
},
error: function(data) {
$.alert("连接超时,请稍后再试", "提示");
}
});
};
// function dzGetPoint(dz, point) {
// // 创建地址解析器实例
// var myGeo = new BMap.Geocoder();
// // 将地址解析结果显示在地图上,并调整地图视野
// myGeo.getPoint(dz, function(point) {
// if(point) {
// map.centerAndZoom(point, 16);
// // map.addOverlay(new BMap.Marker(point));
// return point;
// } else {
// $.alert("地址未能解析到地图上,请稍候再试", "提示");
// }
// }, "吉林省");
//
// }
window.onscroll = function() {
var scroll_top = $(document).scrollTop();
if(scroll_top != 0) {
$(".returnTopBtn").show();
} else if(scroll_top == 0) {
$(".returnTopBtn").hide();
}
}
//每当点击地图按钮的时候,页面都返回顶部
$("#chooseMap").click(function() {
$(window).scrollTop(0);
});
$(".returnTopBtn").click(function() {
$("body").animate({
scrollTop: 0
}, 300) //0.3秒回到顶部动画效果
});
//方法:点击每个li
// var staMain; //创建空字符串staMain 点击后将收费站详情赋值给它
// var loadingJumpToMap = function() {
// // jumpToTollStationMsg(t);
//
// };
// setTimeout(loadingJumpToMap, 500);
function jumpToKyz(t) {
// 跳转至地图区域
setTimeout(function() {
// console.log(t.innerHTML);
//获取某个收费站信息
map.clearOverlays(); //清除地图上所有覆盖物
var msgAllArr = [];
var msgTitle = $(t).html(); //标题
var msg1 = "地址:" + $(t).attr("data-1"); //地址
var msg2 = $(t).attr("data-2"); //电话
var msg3 = "预售期:" + $(t).attr("data-3"); //预售期
var msg4 = "公交:" + $(t).attr("data-4"); //公交
var msg5 = "开通代售:" + $(t).attr("data-5"); //开通代售
var msg6 = "运营时间:" + $(t).attr("data-6"); //运营时间
var msg7 = "取票窗口:" + $(t).attr("data-7"); //取票窗口
msgAllArr.push(msgTitle, msg1, msg2, msg3, msg4, msg5, msg6, msg7);
// console.log(msgAllArr);
//文字地址解析为坐标
geocodeSearch(msg1, msgAllArr);
}, 300);
};
//坐标解析及展示方法
function geocodeSearch(dz, msgAllArr) {
map.clearOverlays();
var myGeo = new BMap.Geocoder();
myGeo.getPoint(dz, function(point) {
if(point) {
var a = "" + point.lng + "," + point.lat + "";
a = a.split(",");
var daozhequ = Number(a[0]) + "," + Number(a[1]);
map.centerAndZoom(new BMap.Point(Number(a[0]), Number(a[1])), 14);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
var opts = {
width: 200, // 信息窗口宽度
title: msgAllArr[0], // 信息窗口标题
enableMessage: true //设置允许信息窗发送短息
// searchTypes: [BMAPLIB_TAB_TO_HERE]
}
var main = "";
for(var i = 1; i < msgAllArr.length; i++) {
if(i == 2) {
main += "电话:<span class='clickTel' onclick='phoneThisNum(this)'>" + msgAllArr[i] + "</span><br/>";
} else {
main += msgAllArr[i] + "<br />";
}
}
var infoWindow = new BMap.InfoWindow(main, opts); // 创建信息窗口对象
marker.setOffset(new BMap.Size(4, 22)); //改变提示文本位置
map.openInfoWindow(infoWindow, point); //页面跳转至地图区域自动开启信息窗口
marker.addEventListener("click", function() {
map.openInfoWindow(infoWindow, point); //开启信息窗口
});
} else {
$.alert("地址未能解析到地图上,请稍候再试", "提示");
}
});
$("#chooseMap").click();
}
//点击拨打电话方法
function phoneThisNum(t) {
void plus.device.dial(t.innerHTML, confirm);
}
// //方法:输入框输入信息模糊查询
// function tollStationInputTS() {
// $.ajax({
// type: "post",
// url: Url,
// data: {
// "type": "service_areas_info_by_name",
// "SERVICENAME": $("#tollStation_suggestId").val()
// },
// async: false,
// cache: false,
// dataType: "jsonp", //数据类型为jsonp
// jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
// jsonpCallback: "jsonpCallback1",
// success: function(data) {
// if(data.CODE == 0) {
// $("#noResult").show();
// $("#loadingSFZ").hide();
// } else {
// var d = data.DATA;
// var m = data.MDATA;
// if(isEncrypt(d, m)) {
// d = eval(d);
// //console.log(d);
// $("#noResult").hide();
// for(var i = 0; i < d.length; i++) {
// //console.log(data);
// var li = $('<li data-position="' + d[i].position + '" data-business="' + d[i].business + '" data-phone="' + d[i].phonenumber + '" data-weizhiX="' + d[i].coordinateX + '" data-weizhiY="' + d[i].coordinateY + '" onclick="jumpToTollStationMsg(this)">' + d[i].serviceName + '</li>');
// $("#tollStationAll_Ul").append(li);
// $("#loadingSFZ").hide();
// }
// } else {
// errMD();
// }
// }
// },
// error: function(data) {
// $.alert("连接超时,请稍后再试", "提示");
// }
// });
// };
$("#fwqPrevBtn").click(function() {
if($("#chooseSS").hasClass("weui_bar_item_on")) { //当页面在搜索页时
window.location.href = "javascript:history.go(-1)";
} else {
$("#chooseSS").click();
}
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/panwan1483/jilin__hzs.git
git@gitee.com:panwan1483/jilin__hzs.git
panwan1483
jilin__hzs
畅行吉林_hzs
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385