天地图公交查询jsp

最新推荐文章于 2023-08-02 18:17:39 发布

qq_39572047

最新推荐文章于 2023-08-02 18:17:39 发布

阅读量616

点赞数

分类专栏：学习成果文章标签：天地图公交查询 jsp 免注册地图

本文链接：https://blog.csdn.net/qq_39572047/article/details/79891146

版权

学习成果专栏收录该内容

1 篇文章 1 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地图"/>
<title>天地图－地图API－范例－公交搜索</title>
<script type="text/javascript" src="search.js"></script>

<script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
<style type="text/css">
.search {
font-size: 13px;
border: 1px solid #999999;
}

.ls {
line-height: 27px;
padding-left: 7px;
}

.prompt {
display: none;
font-size: 13px;
border: 1px solid #999999;
}

.statistics {
display: none;
font-size: 13px;
border: 1px solid #999999;
overflow-y: scroll;
height: 150px;
}

.suggests {
display: none;
font-size: 13px;
border: 1px solid #999999;
}

;
.lineData {
display: none;
font-size: 13px;
border: 1px solid #999999;
}

.result {
display: none;
font-size: 12px;
border: 1px solid #999999;
line-height: 27px;
padding-left: 7px;
}
</style>

<script>
var map; //地图对象
var zoom = 12; //地图级别
var transitRoute; //公交搜索对象
var obj; //公交搜索结果
var startLngLat; //起点经纬度
var endLngLat; //终点经纬度
var startTool; //起点标注工具
var endTool; //终点标注工具
var startIcon = "http://lbs.tianditu.com/images/bus/start.png"; //起点图标
var endIcon = "http://lbs.tianditu.com/images/bus/end.png"; //终点图标
var map_bus = "http://lbs.tianditu.com/images/bus/map_bus.png";
var map_metro = "http://lbs.tianditu.com/images/bus/map_metro.png";


var localsearch;
var onfocus;

function onLoad() {
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(104.07, 30.67), zoom);

var config = {
pageCapacity: 10, //每页显示的数量
onSearchComplete: localSearchResult //接收数据的回调函数
};
//创建搜索对象
localsearch = new T.LocalSearch(map, config);


//鼠标标起点
startTool = new T.MarkTool(map, {
icon: new T.Icon({
iconUrl: startIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31)
}), follow: true
});
startTool.on("mouseup", mouseUpStartMaker);
endTool = new T.MarkTool(map, {
icon: new T.Icon({
iconUrl: endIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31)
}), follow: true
});
endTool.on("mouseup", mouseUpEndMaker);

var config = {
policy: 1, //公交导航的策略参数
onSearchComplete: busSearchResult //检索完成后的回调函数
};
//创建公交搜索对象
transitRoute = new T.TransitRoute(map, config);
}

//公交搜索
function searchBus() {
//清空显示列表
document.getElementById("resultDiv2").innerHTML = "";
//清空地图
map.clearOverLays();

//起点经纬度
// var startVal = document.getElementById("start").value.split(",");
// startLngLat = new T.LngLat(startVal[0], startVal[1]);
//终点经纬度
// var endVal = document.getElementById("end").value.split(",");
// endLngLat = new T.LngLat(endVal[0], endVal[1]);

//设置公交策略
transitRoute.setPolicy(getRadioValue());
// alert(startLngLat+","+endLngLat)
//公交搜索
transitRoute.search(startLngLat, endLngLat);
}

//显示公交搜索结果
function busSearchResult(result) {

if (transitRoute.getStatus() == 0) {
//添加起始点
createStartMarker();

obj = result;
var resultList = document.createElement("div");
//获取方案个数
var plans = result.getNumPlans();
for (var i = 0; i < plans; i++) {
//获得单条公交结果对象
var plan = result.getPlan(i);

//显示单个方案面板
var div = document.createElement("div");
div.style.cssText = "font-size:12px; cursor:pointer; border:1px solid #999999;";
//闭包
(function (i) {
div.onclick = function () {
//清空地图
map.clearOverLays();
//添加起始点
createStartMarker();
//显示线路
createSegments(obj.getPlan(i));
};
})(i);

//显示方案内容
var describeStr = "<strong>方案" + (i + 1) + "：" + plan.getLineName().join("→") + "，总时间：" + plan.getDuration() + "分，总距离：" + Math.round(plan.getDistance()) + "米</strong>";
describeStr += "<div><img src='" + startIcon + "'/>" + document.getElementById("start").value + "</div>";

//显示每个方案的详细信息
var segmentNum = plan.getNumSegments();
for (var m = 0; m < segmentNum; m++) {
var line = plan.getDetails(m);
var segmentLine = line.getSegmentLine()[0];

//经过的公交或地铁的站数
var stationCount = (segmentLine.segmentStationCount != "") ? "，经过" + segmentLine.segmentStationCount + "站" : "";

//线路类型1，步行；2，公交；3，地铁；4，地铁站内换乘
if (line.getSegmentType() == 1) {
describeStr += "步行约" + segmentLine.segmentDistance + "米，到达" + line.getStationEnd().name + "，";
}
else if (line.getSegmentType() == 2) {
describeStr += "乘坐" + segmentLine.direction + stationCount + "，到达" + line.getStationEnd().name + "，";
}
else if (line.getSegmentType() == 3) {
describeStr += "乘坐" + segmentLine.direction + stationCount + "，到达" + line.getStationEnd().name + "，";
}
else if (line.getSegmentType() == 4) {
describeStr += "站内换乘，";
}
}
//去掉最后的逗号
describeStr = describeStr.substring(0, describeStr.length - 1);
describeStr += "<div><img src='" + endIcon + "'/>" + document.getElementById("end").value + "</div>";
div.innerHTML = describeStr;
resultList.appendChild(div);

//在地图上默认显示方案一的线路
if (i == 0) {
createSegments(result.getPlan(0));
}
}
//显示公交搜索结果
document.getElementById("resultDiv2").appendChild(resultList);
}
}

//显示公交线路
function createSegments(plan, planNum) {
var segmentNum = plan.getNumSegments();
for (var m = 0; m < segmentNum; m++) {
var line = plan.getDetails(m);

var segmentLine = line.getSegmentLine()[0];
//显示线路
createRoute(segmentLine.linePoint, line.getSegmentType(), line.getStationStart().lonlat, line.getStationEnd().lonlat);
//显示换乘图标
createMarker(line.getStationStart().lonlat, line.getStationEnd().lonlat, line.getSegmentType());

}
}

//显示公交换乘图标,lnglatStartStr表示该线路的起始点，lnglatEndStr表示该线路的终点，type表示线路类型
function createMarker(lnglatStartStr, lnglatEndStr, type) {
var icon1;
if (type == 2) //公交
{
//公交标注
icon1 = new T.Icon({
iconUrl: map_bus,
iconSize: new T.Point(23, 23),
iconAnchor: new T.Point(12, 12)
})
}
else if (type == 3) //地铁
{
//地铁标注
// var icon = new TIcon(map_metro, new TSize(23, 23), {anchor: new TPixel(12, 12)});
icon1 = new T.Icon({
iconUrl: map_metro,
iconSize: new T.Point(23, 23),
iconAnchor: new T.Point(12, 12)
})
}
else //地铁站内换乘
{
//地铁标注
// var icon = new TIcon(map_metro, new TSize(23, 23), {anchor: new TPixel(12, 12)});
icon1 = new T.Icon({
iconUrl: map_metro,
iconSize: new T.Point(23, 23),
iconAnchor: new T.Point(12, 12)
})

}

if (type != 1) {
var lnglatStartArr = lnglatStartStr.split(",");
var lnglatStart = new T.LngLat(lnglatStartArr[0], lnglatStartArr[1]);
var lnglatEndArr = lnglatEndStr.split(",");
var lnglatEnd = new T.LngLat(lnglatEndArr[0], lnglatEndArr[1]);
var startMarker = new T.Marker(lnglatStart, {icon: icon1});
map.addOverLay(startMarker);
var endMarker = new T.Marker(lnglatEnd, {icon: icon1});
map.addOverLay(endMarker);
}
}

//公交线路，pointsStr表示经纬度字符串，type表示线路类型1，步行；2，公交；3，地铁；4，地铁站内换乘，lnglat表示显示公交或地铁图标的经纬度
function createRoute(pointsStr, type, lnglatStartStr, lnglatEndStr) {

//去掉经纬度字符串最后一个分号，并存储在一个数据中。
var points = pointsStr.substring(0, pointsStr.length - 1).split(";");
//存储经纬度的数组
var lnglatArr = [];
for (var i = 0; i < points.length; i++) {
var lnglat = points[i].split(",");
lnglatArr.push(new T.LngLat(lnglat[0], lnglat[1]));
}

//步行
if (type == 1) {
var lineColor = "#2E9531"; //线的颜色
var lineStyle = "dashed"; //线的样式
}
else if (type == 2) //公交
{
var lineColor = "#2C64A7"; //线的颜色
var lineStyle = "solid"; //线的样式
}
else if (type == 3) //地铁
{
var lineColor = "#2C64A7"; //线的颜色
var lineStyle = "solid"; //线的样式
}
else //地铁站内换乘
{
var lineColor = "#2E9531"; //线的颜色
var lineStyle = "dashed"; //线的样式
}

//创建线对象
var line = new T.Polyline(lnglatArr, {
color: lineColor,
weight: 4,
opacity: 1,
lineStyle: lineStyle
});
//向地图上添加线
map.addOverLay(line);
}

//添加起始点
function createStartMarker() {
//向地图上添加起点
var icon = new T.Icon({
iconUrl: startIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31)
})
var startMarker = new T.Marker(startLngLat, {icon: icon});
map.addOverLay(startMarker);
//向地图上添加终点
var icon = new T.Icon({
iconUrl: endIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31)
})
var endMarker = new T.Marker(endLngLat, {icon: icon});
map.addOverLay(endMarker);
}

function mouseUpStartMaker(e) {
startLngLat = e.currentLnglat;
document.getElementById("start").value = e.currentLnglat.getLng() + "," + e.currentLnglat.getLat();
}

function mouseUpEndMaker(e) {
startLngLat = e.currentLnglat;
document.getElementById("end").value = e.currentLnglat.getLng() + "," + e.currentLnglat.getLat();
}

//获得公交策略
function getRadioValue() {
var obj = document.getElementsByName("planType");
for (var i = 0; i < obj.length; i++) {
if (obj[i].checked) {
return obj[i].value;
}
}
}



function localSearchResult(result) {
//清空地图及搜索列表
clearAll();

//添加提示词
prompt(result);

//根据返回类型解析搜索结果
switch (parseInt(result.getResultType())) {
case 1:
//解析点数据结果
pois(result.getPois());
break;
case 2:
//解析推荐城市
statistics(result.getStatistics());
break;
case 3:
//解析行政区划边界
area(result.getArea());
break;
case 4:
//解析建议词信息
suggests(result.getSuggests());
break;
case 5:
//解析公交信息
lineData(result.getLineData());
break;
}
}

//解析提示词
function prompt(obj) {
var prompts = obj.getPrompt();
if (prompts) {
var promptHtml = "";
for (var i = 0; i < prompts.length; i++) {
var prompt = prompts[i];
var promptType = prompt.type;
var promptAdmins = prompt.admins;
var meanprompt = prompt.DidYouMean;
if (promptType == 1) {
promptHtml += "<p>您是否要在" + promptAdmins[0].name + "</strong>搜索更多包含<strong>" + obj.getKeyword() + "</strong>的相关内容？<p>";
}
else if (promptType == 2) {
promptHtml += "<p>在<strong>" + promptAdmins[0].name + "</strong>没有搜索到与<strong>" + obj.getKeyword() + "</strong>相关的结果。<p>";
if (meanprompt) {
promptHtml += "<p>您是否要找：<font weight='bold' color='#035fbe'><strong>" + meanprompt + "</strong></font><p>";
}
}
else if (promptType == 3) {
promptHtml += "<p style='margin-bottom:3px;'>有以下相关结果，您是否要找：</p>"
for (i = 0; i < promptAdmins.length; i++) {
promptHtml += "<p>" + promptAdmins[i].name + "</p>";
}
}
}
if (promptHtml != "") {
document.getElementById("promptDiv").style.display = "block";
document.getElementById("promptDiv").innerHTML = promptHtml;
}
}
}

//解析点数据结果
function pois(obj) {
if (obj) {
//显示搜索列表
var divMarker = document.createElement("div");
//坐标数组，设置最佳比例尺时会用到
var zoomArr = [];
for (var i = 0; i < obj.length; i++) {
//闭包
(function (i) {
//名称
var name = obj[i].name;
//地址
var address = obj[i].address;
//坐标
var lnglatArr = obj[i].lonlat.split(" ");
var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);

var winHtml = "名称:" + name + "<br/>地址:" + address;

//创建标注对象
var marker = new T.Marker(lnglat);
//地图上添加标注点
map.addOverLay(marker);
//注册标注点的点击事件
var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
marker.addEventListener("click", function () {
marker.openInfoWindow(markerInfoWin);
});

zoomArr.push(lnglat);

//在页面上显示搜索的列表
var a = document.createElement("a");
a.href = "javascript://";
a.innerHTML = name;

// aaa(obj);
a.onclick = function () {
// document.
// var bbb= document.getElementByClass("").id
// 选中结构中的某条结果
if(onfocue =="start"){
startLngLat = lnglat;
document.getElementById("start").value = name;

}else if(onfocue =="end"){
endLngLat = lnglat;
document.getElementById("end").value = name;
};
showPosition(marker, winHtml);

document.getElementById("resultDiv").style.display="";


}
divMarker.appendChild(document.createTextNode((i + 1) + "."));
divMarker.appendChild(a);
divMarker.appendChild(document.createElement("br"));
})(i);
}
//显示地图的最佳级别
map.setViewport(zoomArr);
//显示搜索结果
divMarker.appendChild(document.createTextNode('共' + localsearch.getCountNumber() + '条记录，分' + localsearch.getCountPage() + '页,当前第' + localsearch.getPageIndex() + '页'));
document.getElementById("searchDiv").appendChild(divMarker);
document.getElementById("resultDiv").style.display = "block";
}
}

//显示信息框
function showPosition(marker, winHtml) {
var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
marker.openInfoWindow(markerInfoWin);
}

//解析推荐城市
function statistics(obj) {
if (obj) {
//坐标数组，设置最佳比例尺时会用到
var pointsArr = [];
var priorityCitysHtml = "";
var allAdminsHtml = "";
var priorityCitys = obj.priorityCitys;
if (priorityCitys) {
//推荐城市显示
priorityCitysHtml += "在中国以下城市有结果<ul>";
for (var i = 0; i < priorityCitys.length; i++) {
priorityCitysHtml += "<li>" + priorityCitys[i].name + "(" + priorityCitys[i].count + ")</li>";
}
priorityCitysHtml += "</ul>";
}

var allAdmins = obj.allAdmins;
if (allAdmins) {
allAdminsHtml += "更多城市<ul>";
for (var i = 0; i < allAdmins.length; i++) {
allAdminsHtml += "<li>" + allAdmins[i].name + "(" + allAdmins[i].count + ")";
var childAdmins = allAdmins[i].childAdmins;
if (childAdmins) {
for (var m = 0; m < childAdmins.length; m++) {
allAdminsHtml += "<blockquote>" + childAdmins[m].name + "(" + childAdmins[m].count + ")</blockquote>";
}
}
allAdminsHtml += "</li>"
}
allAdminsHtml += "</ul>";
}
document.getElementById("statisticsDiv").style.display = "block";
document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;
}
}

//解析行政区划边界
function area(obj) {
if (obj) {
//坐标数组，设置最佳比例尺时会用到
var pointsArr = [];
var points = obj.points;
for (var i = 0; i < points.length; i++) {
var regionLngLats = [];
var regionArr = points[i].region.split(",");
for (var m = 0; m < regionArr.length; m++) {
var lnglatArr = regionArr[m].split(" ");
var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
regionLngLats.push(lnglat);
pointsArr.push(lnglat);
}
//创建线对象
var line = new T.Polyline(regionLngLats, {
color: "blue",
weight: 3,
opacity: 1,
lineStyle: "dashed"
});
//向地图上添加线
map.addOverLay(line);
}
//显示最佳比例尺
map.setViewport(pointsArr);
}
}

//解析建议词信息
function suggests(obj) {
if (obj) {
//建议词提示，如果搜索类型为公交规划建议词或公交站搜索时，返回结果为公交信息的建议词。
var suggestsHtml = "建议词提示<ul>";
for (var i = 0; i < obj.length; i++) {
suggestsHtml += "<li>" + obj[i].name + "  <font style='color:#666666'>" + obj[i].address + "</font></li>";
}
suggestsHtml += "</ul>";
document.getElementById("suggestsDiv").style.display = "block";
document.getElementById("suggestsDiv").innerHTML = suggestsHtml;
}
}

//解析公交信息
function lineData(obj) {
if (obj) {
//公交提示
var lineDataHtml = "公交提示<ul>";
for (var i = 0; i < obj.length; i++) {
lineDataHtml += "<li>" + obj[i].name + "  <font style='color:#666666'>共" + obj[i].stationNum + "站</font></li>";
}
lineDataHtml += "</ul>";
document.getElementById("lineDataDiv").style.display = "block";
document.getElementById("lineDataDiv").innerHTML = lineDataHtml;
}
}

//清空地图及搜索列表
function clearAll() {
map.clearOverLays();
document.getElementById("searchDiv").innerHTML = "";
document.getElementById("resultDiv").style.display = "none";
document.getElementById("statisticsDiv").innerHTML = "";
document.getElementById("statisticsDiv").style.display = "none";
document.getElementById("promptDiv").innerHTML = "";
document.getElementById("promptDiv").style.display = "none";
document.getElementById("suggestsDiv").innerHTML = "";
document.getElementById("suggestsDiv").style.display = "none";
document.getElementById("lineDataDiv").innerHTML = "";
document.getElementById("lineDataDiv").style.display = "none";
}

//动态查询
function onInput(dom) {
//清空地图及搜索列表
clearAll();
localsearch.search(document.getElementById(dom.getAttribute("id")).value);
}
//获取光标所在的位置

function aaa(obj){
onfocue=obj.getAttribute("id");

}
//交换起点终点
function changAB(){
//交换经纬度
[startLngLat,endLngLat] = [endLngLat,startLngLat];
//交换显示值
var sevalue=document.getElementById("start").value;

document.getElementById("start").value = document.getElementById("end").value;

document.getElementById("end").value = sevalue;

}


</script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<div >
<p>本示例演示如何进行公交搜索。</p>


<input type="radio" name="planType" value="1" checked="checked"/>较快捷
<input type="radio" name="planType" value="2"/>少换乘
<input type="radio" name="planType" value="4"/>少步行

<br/>

起点：<input type="text" id="start" class="1" onInput="onInput(this)" onFocus="aaa(this)" value=""/>

<input type="button" onClick="changAB()" value="交换"/>
<br/>

终点：<input type="text" id="end" class="2" onInput="onInput(this)" onFocus="aaa(this)" value=""/>


<input type="button" onClick="searchBus()" value="公交搜索"/>

<br/>

<div id="resultDiv2" ></div>



<br/>

<div id="promptDiv" class="prompt"></div>

<div id="statisticsDiv" class="statistics"></div>

<div id="suggestsDiv" class="suggests"></div>

<div id="lineDataDiv" class="lineData"></div>

<div id="resultDiv" class="result">
<div id="searchDiv"></div>
<div id="pageDiv">
<input type="button" value="第一页" onClick="localsearch.firstPage()"/>
<input type="button" value="上一页" onClick="localsearch.previousPage()"/>
<input type="button" value="下一页" onClick="localsearch.nextPage()"/>
<input type="button" value="最后一页" onClick="localsearch.lastPage()"/>
<br/>
转到第<input type="text" value="1" id="pageId" size="3"/>页
<input type="button" onClick="localsearch.gotoPage(parseInt(document.getElementById('pageId').value));"
value="转到"/>
</div>
</div>
</div>
</body>

</html>

有什么问题请【评论交流】初次做地图不足之处请见谅，谢谢！

如果想接着开发请点击下面的l

本文开发使用的天地图API版本