map.html 14.8 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>

<th:block th:include="include :: header('地图查询')" />
<th:block th:include="include :: select2-css" />
<style>
body, html, #container {
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
}

.info {
	z-index: 999;
	width: auto;
	min-width: 22rem;
	padding: .75rem 1.25rem;
	margin-left: 1.25rem;
	position: fixed;
	top: 1rem;
	background-color: #fff;
	border-radius: .25rem;
	font-size: 14px;
	color: #666;
	box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}

.stationInfo {
	right: 0px;
	top: 100px;
	display: none;
}

.tangram-suggestion-main {
	z-index: 999999;
}
.subContainer {
	position: relative;
	padding-bottom: 10px;
}
.opt {
	position: relative;
	padding-top: 10px;
}
.optTitle {
	width: 60px;
	height: 28px;
	line-height: 28px;
	font-size: 14px;
	text-align: center;
	background: #c5464a;
	color: #fff;
	border-radius: 5px 0 0 5px;
}
.lf{
	padding-left: 25px;
}
</style>
<script
	src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=IGGrr4UjwIYzatoCRFKEL8sT"></script>
</head>
<body>
	<div class="info" style="width: 450px">
		<ul class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active"><a onclick="show('station','road','line','area')" role="tab" data-toggle="tab">站点查询</a></li>
			<li role="presentation"><a onclick="show('road','station','line','area')" role="tab" data-toggle="tab">道路查询</a></li>
			<li role="presentation"><a onclick="show('line','road','station','area')" role="tab" data-toggle="tab">途径线路</a></li>
			<li role="presentation"><a onclick="show('area','road','station','line')" role="tab" data-toggle="tab">区域查询</a></li>
		</ul>

		<form id="station">
			<div class="row">
				<h4></h4>
				<label class="col-sm-3"><h4 class="lf">站点</h4></label>
				<div class="col-sm-9" >
					<input type="text"  class="form-control" id="stations">
					<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
				</div>
				<h4></h4>
			</div>
			<div class="row">
				<h4></h4>
				<label class="col-sm-3"><h4 class="lf">范围</h4></label>
				<div class="col-sm-9">
					<input id="distance" class="form-control" type="text" placeholder="单位米">
				</div>
				<h4></h4>
			</div>
			<div class="row">
				<h4></h4>
				<div class="col-sm-4" >
					<button type="button" class="el-button el-button--primary el-button--mini" onclick="searchStation()"><!----><i class="el-icon-search"></i><span>搜索</span></button>
				</div>
				<div class="col-sm-4">
				<button type="button" class="el-button el-button--default el-button--mini" onclick="$.form.reset();"><!----><i class="el-icon-refresh"></i><span>清除站点结果</span></button>
				</div>
			</div>
		</form>

		<form id="road" style="display: none">
			<div class="row">
				<h4></h4>
				<label class="col-sm-3"><h4 class="lf">路名</h4></label>
				<div class="col-sm-9">
					<input id="roadName" class="form-control" type="text">
				</div>
				<h4></h4>
			</div>
			<div class="row">
				<h4></h4>
				<div class="col-sm-4">
					<button type="button" class="el-button el-button--primary el-button--mini" onclick="searchRoad();"><!----><i class="el-icon-search"></i><span>搜索</span></button>
				</div>
				<div class="col-sm-4">
					<button type="button" class="el-button el-button--default el-button--mini" onclick="reset();"><!----><i class="el-icon-refresh"></i><span>清除站点结果</span></button>
				</div>
			</div>
		</form>
		<form id="line"  style="display: none">

			<div class="row">
				<h4></h4>
				<div class="row pre-scrollable">
				<div id="bus" style="padding-left: 25px;width: 440px">
				</div>
				</div>
				<h4></h4>
				<div  class="lf">
					<i class="fa fa-minus " style="color:#5298ff" id="c1"></i>
					<i class="fa fa-minus " style="color:#E0312A" id="c2"></i>
					<i class="fa fa-minus " style="color:#30e868" id="c3"></i>
					<i class="fa fa-minus " style="color:#A80FE4" id="c4"></i>
					<i class="fa fa-minus " style="color:#0010eb" id="c5"></i>
				</div>
				<h4></h4>
				<div class="col-sm-4">
					<button type="button" class="el-button el-button--default el-button--mini" onclick="clearline();"><!----><i class="el-icon-refresh"></i><span>清除线路</span></button>
				</div>

			</div>
		</form>
		<form id="area" style="display: none">
			<div class="row">
				<h4></h4>
				<label class="col-sm-3"><h4 class="lf">范围</h4></label>
				<div class="col-sm-9">
					<input id="distance2" class="form-control" type="text" placeholder="单位米">
				</div>
				<h4></h4>
			</div>
			<div class="row">
				<h4></h4>
				<div class="col-sm-4" >
					<button type="button" class="el-button el-button--primary el-button--mini" onclick="searchArea()"><!----><i class="el-icon-search"></i><span>搜索</span></button>
				</div>
				<div class="col-sm-4">
					<button type="button" class="el-button el-button--default el-button--mini" onclick="$.form.reset();"><!----><i class="el-icon-refresh"></i><span>清除站点结果</span></button>
				</div>
			</div>
		</form>
	</div>


	<div class="info stationInfo">
		<div id="stationInfo"></div>
	</div>

	<div id="container"></div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: bootstrap-suggest-js" />
	<th:block th:include="include :: select2-js" />
	<script>
		//tab栏控制
		function show(id1,id2,id3,id4){
			$('#'+id1).attr("style","display:show;");
			$('#'+id2).attr("style","display:none;");
			$('#'+id3).attr("style","display:none;");
			$('#'+id4).attr("style","display:none;");
		}

		//地图的初始化
		var map = new BMapGL.Map('container'); // 创建Map实例
		map.centerAndZoom(new BMapGL.Point(121.528733, 31.237425), 12); // 初始化地图,设置中心点坐标和地图级别
		map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放


		/*map.addEventListener('click', function(e) {
			if (e.overlay) {
				return; // 存在覆盖物退出
			}
		});
		var stations
		*/

		//地点查询
		function searchStation(){
			var station=$('#stations').val();
			var distance=$("#distance").val()

			//创建地址解析器实例
			var myGeo = new BMapGL.Geocoder();
			// 将地址解析结果显示在地图上，并调整地图视野
			myGeo.getPoint(station, function(point){
				map.clearOverlays();
				map.centerAndZoom(point, 17);
				a(point.lng,point.lat,distance)
			}, '上海市')
		}

		//道路查询
		function searchRoad(){
			var roadName=$('#roadName').val();
			var distance=20000;
			//创建地址解析器实例
			var myGeo = new BMapGL.Geocoder();
			// 将地址解析结果显示在地图上，并调整地图视野
			myGeo.getPoint(roadName, function(point){
				map.clearOverlays();
				map.centerAndZoom(point, 17);
				b(point.lng,point.lat,distance,roadName)
			}, '上海市')
		}

		//区域查询
		function searchArea(){
			var distance=$("#distance2").val();
			map.clearOverlays();
			var lng=p.latLng.lng;
			var lat=p.latLng.lat;
			map.centerAndZoom(new BMapGL.Point(lng,lat), 17);
			a(lng,lat,distance);
		}

		//站点标注
		function a(lng,lat,distance){
			$.get("http://180.167.126.126:18991/prod-api/service/interfact/getStation?lng="
					+lng + "&lat=" + lat + "&dis="
					+ distance / 1000, function(data) {
				if (data.code == "200") {
					var bus=new Array();
					for ( var i in data.data) {
						(function(){
							var station = data.data[i];
							var marker = new BMapGL.Marker(new BMapGL.Point(station.lonBd, station.latBd),{title:station.standardStationCode});

							marker.station = data.data[i];

							var opts = {
								width: 200,
								height: 200,
								title: station.stationName
							};
							var  lineList=data.data[i].lineList;
							var arr=lineList.split("、")
							Array.prototype.push.apply(bus, arr);
							var str='';
							for ( var j in arr) {
								str+="<a onClick='searchBus(\""+arr[j]+"\")'>"+arr[j]+"</a>、";
							}
							var info = "";
							info += "<span>站点名称：" +  data.data[i].stationName
									+ "</span><br/>";
							info += "<span>行业编码：" +  data.data[i].standardStationCode
									+ "</span><br/>";
							info += "<span>站点编码：" +  data.data[i].stationCode
									+ "</span><br/>";
							info += "<span>经过线路：" +  str
									+ "</span><br/>";
							info += "<span>道路名称：" +  data.data[i].roadName
									+ "</span><br/>";

							var infoWindow = new BMapGL.InfoWindow(info, opts);
							marker.addEventListener('click', function() {
								map.openInfoWindow(infoWindow, new BMapGL.Point(station.lonBd, station.latBd)); // 开启信息窗口
							});
							map.addOverlay(marker);
						})();
					}
					bus=Array.from(new Set(bus));
					var str='';
					for ( var j in bus) {
						str+="<a onClick='searchBus(\""+bus[j]+"\")'>"+bus[j]+"</a>、";
					}
					document.getElementById('bus').innerHTML=str;

					// 绘制圆
					var circle = new BMapGL.Circle(new BMapGL.Point(lng,lat), distance/2, {
						strokeColor: 'blue',
						strokeWeight: 2,
						strokeOpacity: 0.5
					});
					map.addOverlay(circle);
				}
			});
		}

		//站点标注用来查道路的 多了个站点筛选和 去除 圆形范围
		function b(lng,lat,distance,roadName){
			$.get("http://180.167.126.126:18991/prod-api/service/interfact/getStation?lng="
					+lng + "&lat=" + lat + "&dis="
					+ distance / 1000, function(data) {
				if (data.code == "200") {
					var bus=new Array();
					for ( var i in data.data) {
						(function(){
							var station = data.data[i];
							var marker = new BMapGL.Marker(new BMapGL.Point(station.lonBd, station.latBd),{title:station.standardStationCode});

							marker.station = data.data[i];

							var opts = {
								width: 200,
								height: 200,
								title: station.stationName
							};


							if(data.data[i].roadName==roadName){
								var  lineList=data.data[i].lineList;
								var arr=lineList.split("、");
								Array.prototype.push.apply(bus, arr);
								var str='';
								for ( var j in arr) {
									str+="<a onClick='searchBus(\""+arr[j]+"\")'>"+arr[j]+"</a>、";
								}
								var info = "";
								info += "<span>站点名称：" +  data.data[i].stationName
										+ "</span><br/>";
								info += "<span>行业编码：" +  data.data[i].standardStationCode
										+ "</span><br/>";
								info += "<span>站点编码：" +  data.data[i].stationCode
										+ "</span><br/>";
								info += "<span>经过线路：" +  str
										+ "</span><br/>";
								info += "<span>道路名称：" +  data.data[i].roadName
										+ "</span><br/>";

								var infoWindow = new BMapGL.InfoWindow(info, opts);


								marker.addEventListener('click', function() {
									map.openInfoWindow(infoWindow, new BMapGL.Point(station.lonBd, station.latBd)); // 开启信息窗口
								});
								map.addOverlay(marker);
							}

						})();
					}
					bus=Array.from(new Set(bus));
					var str='';
					for ( var j in bus) {
						str+="<a onClick='searchBus(\""+bus[j]+"\")'>"+bus[j]+"</a>、";
					}
					document.getElementById('bus').innerHTML=str;
				}
			});
		}


		//百度下拉列表
		function G(id) {
			return document.getElementById(id);
		}
		var ac = new BMapGL.Autocomplete(    //建立一个自动完成的对象
				{"input" : "stations"
					,"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("stations").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("stations").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, 18);
				map.addOverlay(new BMapGL.Marker(pp));    //添加标注
			}
			var local = new BMapGL.LocalSearch(map, { //智能搜索
				onSearchComplete: myFun
			});
		}


		//多线路查询
		var ll=new Array();//存放折线
		var sl=new Array();//存放站点
		var readyAdd=new Array();//存放线路

		function searchBus(line){
			if (readyAdd.length>=5) {
				alert("最多5条线路");
				return false
			}
			if ($.inArray(line, readyAdd) == -1) {
				bus.getBusList(line);
				readyAdd.push(line); //readyAdd为空数组，用于存储已添加的线路名
				document.getElementById('c'+readyAdd.length).innerHTML=line;
			} else {
				alert("该路线已添加");
			}
		}

		var colors=['#5298ff','#E0312A','#30e868','#A80FE4','#0010eb']
		var bus = new BMapGL.BusLineSearch(map, {
			renderOptions:{map:map,panel:"r-result"},
			onGetBusListComplete: function onGetBusListComplete (result) {
				let fstLine = result.getBusListItem(0);//通过线路名查询线路列表默认第一条
				bus.getBusLine(fstLine);
			},onPolylinesSet: function onPolylinesSet(polyline){//添加公交线时候回调函数.参数：ply:Polyline 公交线路几何对象
				//通过删除api自带的折线 然后改变颜色重新渲染
				map.clearOverlays();
				//https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a3b0
				polyline.setStrokeColor(colors[ll.length]);//颜色
				polyline.setStrokeWeight(4);//宽度
				polyline.setStrokeOpacity(0.9);//透明度
				ll.push(polyline);
				for(let i in ll){
					var polyline2=ll[i];
					map.addOverlay(polyline2); //添加折线覆盖物
				}
			},onMarkersSet : function onMarkersSet(array){//添加公交站点时候回调函数.参数：sts:Array 公交站坐标组成的Marker对象数组
				Array.prototype.push.apply(sl, array);
				for(var i in sl){
					map.addOverlay(sl[i]);
				}
			}
		});


		//右键标记坐标
		var p;
		map.addEventListener('rightclick', function(e){
			var pt = e.latlng;
			var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
			map.removeOverlay(p);
			p=marker;
			map.addOverlay(p);
		})

		function clearline(){
			ll=new Array();//存放折线
			sl=new Array();//存放站点
			readyAdd=new Array();//存放线路
			map.clearOverlays();
			for(var i=1;i<=5;i++){
				document.getElementById('c'+i).innerHTML='';
			}

		}
	</script>


</body>
</html>