1 Star 0 Fork 2

panwan1483/畅行吉林_hzs

forked from celticsv5/畅行吉林_hzs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
show_map.html 19.93 KB
一键复制 编辑 原始数据 按行查看 历史
13601014569 提交于 2018-08-28 22:56 . 上传项目hzs就是我
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地图展示</title>
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/all_css.css" />
<link rel="stylesheet" type="text/css" href="lib/weui.css" />
<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
#showMap_main {
max-width: 640px;
min-width: 320px;
width: 100%;
margin: 0px auto;
}
.app_head_left {
float: left;
width: 30%;
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: 40%;
padding-top: 5px;
}
.app_head_right {
float: right;
width: 30%;
text-align: right;
padding: 12px;
}
.app_head_right a {
color: #FFFFFF;
font-size: 1.3em;
font-weight: bold;
font-family: "黑体";
}
#app_head_title {
text-align: center;
color: #FFFFFF;
font-size: 1.6em;
font-family: "宋体";
font-weight: bold;
}
#container {
height: 100%
}
/*.index_head {
position: static;
}*/
#allmap {
margin-top: 70px;
width: 100%;
}
#showMap_input {
max-width: 640px;
min-width: 320px;
margin: 0px auto;
width: 98%;
margin-left: 1% !important;
position: fixed;
top: 80px;
z-index: 99;
height: 45px;
border: 1px solid #0C85DB;
background-color: #FFFFFF;
/*opacity: 0.8;*/
border-radius: 5px;
}
#suggestId {
padding-left: 10%;
width: 100%;
height: 100%;
border: none;
outline: medium;
border-radius: 5px;
color: #969696;
font-size: 1.15em;
font-weight: bold;
}
#searchBtn {
display: block;
float: left;
position: absolute;
width: 10%;
color: #0C85DB;
font-size: 1.6em;
padding-top: 4px;
text-align: center;
}
#delBtn {
display: block;
float: right;
position: relative;
top: -42px;
width: 5%;
text-align: right;
font-size: 1.1em;
line-height: 40px;
margin-right: 3px;
}
.BMap_noprint {
display: none;
}
.goHere {
width: 70px;
height: 70px;
border-radius: 70px;
margin-top: -35px;
position: absolute;
right: 8%;
color: #FFFFFF;
box-shadow: 0px 3px 2px #737373;
text-align: center;
font-weight: bold;
/*background-color: #0070B4;*/
FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#0070B4, endColorStr=#78C4EC);
/*IE*/
background: -moz-linear-gradient(top, #0070B4, #78C4EC);
/*火狐*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0070B4), to(#78C4EC));
/*谷歌*/
background-image: -webkit-gradient(linear, left bottom, left top, color-start(0, #0070B4), color-stop(1, #78C4EC));
/* Safari & Chrome*/
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#0070B4', endColorstr='#78C4EC');
/*IE6 & IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0070B4', endColorstr='#78C4EC')";
/* IE8 */
}
.goHere p {
height: 0;
margin-top: -15px;
}
.goHere img {
position: relative;
top: 15px;
}
/*底部提示框*/
.foot_showMap {
position: fixed;
bottom: 0;
height: 22%;
box-shadow: 0px -3px 2px #999999;
max-width: 640px;
min-width: 320px;
width: 100%;
margin: 0px auto;
/*background-color: #FFFFFF;*/
background-image: url(img/show_map/bg_jingyue_bottom2.png);
background-size: 100% 105%;
background-repeat: no-repeat;
/*display: none;*/
}
/*从火车站信息跳转过来时的底部段落样式*/
.sta_h1_class {
font-size: 1.3em;
margin-top: 8px;
margin-left: 15px;
padding: 8px 0;
color: #FFFFFF;
border-bottom: 1px solid #DEDEDE;
}
.sta_h2_class {
font-size: 1.05em;
margin: 0px 15px;
padding: 5px 0;
color: #FFFFFF;
}
.sta_h3_class {
text-align: center;
padding-top: 3%;
}
/*从水运跳转过来的底部段落样式*/
.boat_h2_class {
font-size: 1.05em;
margin: 0px 15px;
padding: 5px 0;
color: #FFFFFF;
}
.h2down3 {
position: relative;
top: 2px;
}
.sta_h3_class a {
color: #F0F0F0;
}
/*底部加载loading提示*/
#foot_showMap_loading {
background-color: white;
width: 10%;
margin-left: 45%;
margin-right: 45%;
margin-top: 12%;
border-radius: 100px;
}
#allmap {}
#r-result {
width: 100%;
margin-top: 137px;
}
#r-result div {
border: none !important;
}
#r-result div ol li {
border-bottom: 1px dashed #DEDEDE;
}
#r-result div ol li span+a {
display: none;
}
#r-result>div>div:last-child {
display: none;
}
.BMap_bubble_title a{
display: none;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=MMh4H9m5FLBpizlht86GnGynuaM0oGKz"></script>
</head>
<body ontouchstart>
<div id="showMap_main">
<div class="index_head">
<div class="app_head_left">
<a href="javascript:history.go(-1)" class="iconfont">&#xe6d4;</a>
</div>
<div class="app_head_mid">
<p id="app_head_title">地图展示</p>
</div>
</div>
<div id="allmap"></div>
<div id="r-result" style="display: none;"></div>
<div id="showMap_input">
<a id="searchBtn" href="javascript:;" class="iconfont">&#xe709;</a>
<input type="text" id="suggestId" size="20" placeholder="火车票代售点、餐饮、医疗、银行等" />
<a id="delBtn" href="javascript:;" class="iconfont" style="display: none;">&#xe60b;</a>
</div>
<div class="foot_showMap" id="foot_showMap" style="display: none;">
<!--<div id="goHereBtn" class="goHere">
<p>
<img src="img/show_map/gohereICON.png" /><br />到这去
</p>
</div>-->
<img src="img/show_map/loading2color.gif" id="foot_showMap_loading" style="display: none;" />
<div id="foot_showMap_msgH">
<!--DOM添加至此-->
<!--<h1>长春站 (长春市)</h1>
<h2>地址: 吉林省长春市长白路5号</h2>
<h3><a id="nearByBusBtn" class="iconfont" style="font-size: 20px;">&#xe709; 搜周边公交站点</a></h3>-->
</div>
</div>
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var h = document.documentElement.clientHeight;
var boatPoint;
function getMapHeight() {
var urlStr = "" + window.location;
if(urlStr.indexOf("?sta=") != -1 || urlStr.indexOf("?boatP=") != -1) {
var mapH = h - 70 - (h * 0.2);
} else {
var mapH = h - 70;
}
$("#allmap").height(mapH);
}
var map = new BMap.Map("allmap");
//获取地图高度
$(function() {
getMapHeight();
$("#foot_showMap_loading").show(); //显示信息正在加载
});
// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// var marker = new BMap.Marker(point); // 创建标注
// map.addOverlay(marker); // 将标注添加到地图中
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
$("#searchBtn").click(function() {
//关键字检索
var val = document.getElementById("suggestId");
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
panel: "r-result"
}
});
local.search($("#suggestId").val());
// $("#listBtn").click();
// setPlace();
});
// $.ajax({
// type: "get",
// url: "http://api.map.baidu.com/place/v2/search",
// async: true
// });
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "suggestId",
"location": map
});
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if(e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if(e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
function setPlace() {
map.clearOverlays(); //清除地图上所有覆盖物
function myFun() {
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 17);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
// var local = new BMap.LocalSearch(map, { //智能搜索
// onSearchComplete: myFun
// });
// local.search(myValue);
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
panel: "r-result"
}
});
local.search(myValue);
$("#allmap").hide();
$("#r-result").show();
}
$("#suggestId").focus(function() {
document.getElementById("delBtn").style.display = "block";
});
$("#delBtn").click(function() {
document.getElementById("suggestId").value = "";
$(this).hide();
});
// $("#searchBtn").click(function(){
//
// });
window.onload = function() {
setTimeout(loading, 500);
};
var loading = function() {
//利用DOM添加地图
var urlStr = "" + window.location;
if(urlStr.indexOf("?sta=") != -1) {
//当本页是由火车站查询跳转至此时
$("#foot_showMap").slideDown(400); //显示底部信息
$("#foot_showMap_loading").show(); //显示信息正在加载
var str = urlStr.split("?sta=")[1];
str = str.split("&recid=");
// console.log(str);
var strX = str[0].split("%20")[0];
var strY = str[0].split("%20")[1];
var R = str[1];
// console.log(R);
map.clearOverlays(); //清除地图上所有覆盖物
var staP = new BMap.Point(strX, strY); //地图加载时位于长春市中心点
// console.log(staP);
var staMk = new BMap.Marker(staP);
map.addOverlay(staMk);
map.centerAndZoom(staP, 15); // 初始化地图,设置中心点坐标和地图级别
getStaNameAddress(R);
} else if(urlStr.indexOf("?boatP=") != -1) {
$("#foot_showMap_msgH").html("");
var boatUrl = "" + window.location;
boatUrl = decodeURI(boatUrl);
var boatP = boatUrl.split("?boatP=")[1].split("&MSG=")[0];
var msgStr = boatUrl.split("?boatP=")[1].split("&MSG=")[1];
var type = msgStr.substring(0, 1);
var msg = msgStr.substring(1);
var line1 = msg.split(",")[0]; //底部信息第1行内容 水路设施名称
var line2 = msg.split(",")[1]; //底部信息第2行 水路设施所属市州
var line3 = boatType(type); //底部信息第3行内容 类型
$("#foot_showMap").slideDown(400); //显示底部信息
map.clearOverlays(); //清除地图上所有覆盖物
boatPoint = new BMap.Point(boatP.split(",")[1], boatP.split(",")[0]); //new 一个新的点 并赋值给boatP
// console.log(boatPoint);
var boatMk = new BMap.Marker(boatPoint);
map.addOverlay(boatMk);
map.centerAndZoom(boatPoint, 12); // 初始化地图,设置中心点坐标和地图级别
var h1 = $('<h1 class="sta_h1_class">' + line1 + '</h1>'); //仍用火车站段落1样样式
var h2 = $('<h2 class="boat_h2_class h2down3">' + line2 + '</h2>'); //水运段落2样式 第二段落下移2像素
var h3 = $('<h3 class="boat_h2_class">' + line3 + '</h2>'); //仍用段落2样式
$("#foot_showMap_loading").hide(); //去除loading标志
$("#foot_showMap_msgH").append(h1, h2, h3);
} else {
map.centerAndZoom(new BMap.Point(125.331505, 43.885007), 12);
getGeocode();
}
};
//获取位置
//得到当前位置json字符串信息 及经纬度坐标 海拔 移动 移动速度的方法
function geoInf(position) {
var addressStr = position.addresses;
var codns = position.coords; //获取地理坐标信息;
var lat = codns.latitude; //获取到当前位置的纬度;
x = lat;
var longt = codns.longitude; //获取到当前位置的经度
y = longt;
console.log("安卓");
src = new plus.maps.Point(Number(y), Number(x));
var srcP = new BMap.Point(y, x);
getBaiduPoint(srcP);
// var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
// myGeo.getPoint($("#suggestId_end").val(), function(point) {
// if(point) {
// map.centerAndZoom(point, 16);
// //console.log(point.lng + "," + point.lat);
// //根据起终点坐标查询我的位置-我收藏的地点的线路规划
// var src = new plus.maps.Point(point.lng, point.lat);
// plus.maps.openSysMap(dst, $("#suggestId_end").val(), src);
// } else {
// $.alert("您选择的地址没有解析到结果,请重试", "提示");
// }
// }, "吉林省");
// alert(addressStr);
// $("#jbPlace").val(addressStr);
// console.log('------定位-----' + addressStr);
}
function getBaiduPoint(ggPoint) {
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 3, 5, translateCallback)
}
// function getBaiduP_IOS(point) {
// var convertor = new BMap.Convertor();
// var pointArr = [];
// pointArr.push(ggPoint);
// convertor.translate(pointArr, 3, 5, translateCallback)
// }
//安卓版转换
translateCallback = function(data) {
if(data.status === 0) {
//dst = new plus.maps.Point(data.points[0].lng,data.points[0].lat);
var pointY = data.points[0].lng;
var pointX = data.points[0].lat;
//判断设备是否为IOS
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isiOS == true) {
//IOS系统
// console.log("Ios");
src = new plus.maps.Point(Number(pointY), Number(pointX-0.0037));
pointY = pointY + 0.0068;
pointX = pointX + 0.0021;
var startPstr = new BMap.Point(pointY, pointX);
}
var baiduPoint = new BMap.Point(pointY, pointX);
var bdMarker = new BMap.Marker(baiduPoint);
map.centerAndZoom(baiduPoint, 15);
map.addOverlay(bdMarker);
// var opts = {
// title: "<a class='iconfont'>&#xe6c9;</a>您当前位置", // 信息窗口标题
// enableMessage: true //设置允许信息窗发送短息
// // searchTypes: [BMAPLIB_TAB_TO_HERE]
// }
// var main = "输入目的地,可规划路线及导航";
// var infoWindow = new BMap.InfoWindow(main, opts); // 创建信息窗口对象
// bdMarker.setOffset(new BMap.Size(4, 22)); //改变提示文本位置
// map.openInfoWindow(infoWindow, baiduPoint); //页面跳转至地图区域自动开启信息窗口
// bdMarker.addEventListener("click", function() {
// map.openInfoWindow(infoWindow, baiduPoint); //开启信息窗口
// });
// }
} else {
$.alert("定位失败,请检查您是否打开了定位服务", "提示");
}
}
// 通过定位模块获取位置信息
function getGeocode() {
plus.geolocation.getCurrentPosition(geoInf, {
geocode: true
});
}
//判断船舶页传来的信息为船舶停靠点、港口、码头、哪个类型
function boatType(str) {
if(str == "1") {
str = "类型: 船舶停靠点";
} else if(str == "2") {
str = "类型: 港口";
} else if(str == "3") {
str = "类型: 码头";
}
return str;
}
//获取火车站名称&地址
function getStaNameAddress(myRecid) {
$.ajax({
type: 'post',
url: Url,
async: false,
cache: false,
data: {
type: "train_station_info",
RECID: myRecid
},
dataType: "jsonp", //数据类型为jsonp
jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
jsonpCallback: "jsonpCallback1",
success: function(data) {
$("#foot_showMap_loading").hide(); //去除loading标志
if(data.MSG == "成功") {
$("#foot_showMap_msgH").html("");
var d = eval(data.DATA)[0];
// console.log(d);
var name = d.STDNAME; //名称
var address = d.ADDRESS; //地址
//var park = d.PARKINGLOT //停车场
var h1 = $('<h1 class="sta_h1_class">' + name + '</h1>');
var h2 = $('<h2 class="sta_h2_class">' + address + '</h2>');
// var h3 = $('<h3 class="sta_h3_class"><a id="nearByBusBtn" class="iconfont" style="font-size: 20px;">&#xe709; 搜周边公交站点</a></h3>');
$("#foot_showMap_msgH").append(h1, h2);
} else {
//未获得数据
$.alert("暂无结果", "提示", function() {
window.location.href = "railway_station.html";
});
}
},
error: function(data) {
$.alert("连接超时,请稍后再试", "提示");
}
});
}
//点击‘到这去’按钮
$("#goHereBtn").click(function() {
var url = "" + window.location;
if(url.indexOf("?boatP=") > -1) {
var titleDom = $(this).next().next().children()[0]; //获取地点名称节点
var endStr_name = titleDom.innerHTML; //跳转出行规划后终点字符串前半段
var endStr_address = titleDom.nextElementSibling.innerHTML.split("所属市州: ")[1]; //跳转出行规划后终点字符串后半段
var endStr = "?boatEndP=" + endStr_name + endStr_address; //跳转出行规划后终点字符串
endStr = encodeURI(endStr);
window.location.href = "cxgh.html" + endStr; //跳转至出行规划
} else {
//火车站提示框下的‘到这去’
var nameStr = $("#foot_showMap_msgH h1").html();
url = "?sta=" + url.split("?sta=")[1].split("&recid=")[0] + "&name=" + nameStr;
// console.log(url);
url = encodeURI(url);
window.location.href = "cxgh.html" + url; //跳转至出行规划
}
});
//地图检索功能(区域检索,周边检索,城市内检索)
$("#r-result").click(function() {
$(this).hide();
$("#allmap").show();
map.setZoom(16);
});
</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