Skip to content

D
Devbook

四方云和 / Devbook

通知 0
Star 1
Fork 0
D
Devbook

体验新版 GitCode，发现更多精彩内容 >>

提交 6a07bc47 编写于 作者: RunAtWorld's avatar RunAtWorld
浏览文件
操作

Location 

Locate you
上级 f5073282
展开全部 隐藏空白更改
内联 并排
Showing with 10639 addition and 0 deletion
frame.html 0 → 100644
浏览文件 @ 6a07bc47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ShotestPath演示</title>
<frameset rows="0%,100%" cols="*">
<frame src="frame_top.html" noresize="noresize">
<frameset rows="*" cols="13%,88%">
<frame src="frame_left.html" noresize="noresize">
<frame src="index.htm " noresize="noresize">
</frameset>
</frameset><noframes></noframes>
</head>
<body>
</body>
</html>
frame_left.html 0 → 100644
浏览文件 @ 6a07bc47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左边</title>
</head>
<style type="text/css">
body {
background-color:#FCF;
}
</style>
<body>
<div align="center" style="color:#00F"><h3>功能介绍</h3></div>
<div>
1.点击选择主题风格可自由切换主题
</p>2.输入起点，终点，点击查询，地图显示推荐行驶路线
</p>3.所有功能都基于BaiduMap的API接口
</p>ps:这本是一个课程作业，当时是要研究百度地图最短路线的算法，但因为各种原因，算法没能研究出来，只做到了调用BaiduMap的API
</div>
</body>
</html>
frame_top.html 0 → 100644
浏览文件 @ 6a07bc47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部</title>
<style type="text/css">
body {
background-color: #CCF;
}
</style></head>
<body>
<div align="center" >
<h2>算法设计项目演示--最短路径</h2></div>
</body>
</html>
index.htm 0 → 100644
浏览文件 @ 6a07bc47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>地图应用</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script src="script/jquery.js" type="text/javascript"></script>
<!-- http://api.map.baidu.com/api?v=2.0&ak=您的密钥" -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0B3c1575c78bfb0d1c52a0660cae3491"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
</head>
<body>
<div class="maincontain" id="test">
<div class="eMapsInfo">
<div id="style-select">
<div class="optionpanel">
<label>选择主题风格</label>
<select id="stylelist" onchange="changeMapStyle(this.value)"></select>
</div>
</div>
<!--搜索控制-->
<div class="eMapsTop">
<span>线路查询</span> 从
<input class="txt" type="text" value="北京人民英雄纪念碑" id="startPlace" />
到<input class="txt" type="text" value="湖北大学(武昌主校区)" id="endPlace">
驾车路线
<div d="driving_way">
<select >
<option value="0">最少时间</option>
<option value="1">最短距离</option>
<option value="2">避开高速</option>
</select>
<input type="button" value="查询" id="btnSearch" />
</div>
</div>
<!--地图-->
<div class="eMaps">
<div class="boxmap" id="container">
</div>
</div>
<!--右侧选项-->
<div class="boxpanel" id="box">
<h5>
起点选择&nbsp;<a href="javascript:void(0)" id="btnExpand">(展开)</a></h5>
<div id="startPlacePanel">
</div>
<div id="drivingPanel">
</div>
</div>
<div class="clear">
</div>
</div>
</div>
<div>
其他功能：
<div id="lushu">
<button id="run">开始</button>
<button id="stop">停止</button>
<button id="pause">暂停</button>
<button id="hide">隐藏信息窗口</button>
<button id="show">展示信息窗口</button>
</div>
<button></button>
</div>
<script type="text/javascript">
var setindex = 0;
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(114.338053,30.583184); // 创建点坐标 为我们的教室的坐标
var marker = new BMap.Marker(point); // 创建标注，标注到我们教室
map.enableScrollWheelZoom();
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(20, 10) }));
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }));
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>湖北大学武昌主校区 </h4>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
function getInfoW(obj) {
var startPlaceInfowin = new BMap.InfoWindow("</br>" + obj.title + "</br>" + obj.address + "<p class='t-c'><input value='选为起点' type='button' onclick='startPlaceDeter();' /></p>");
return startPlaceInfowin;
}
function getInfoW_M(obj) {
startPlacePoint = obj.point;
map.openInfoWindow(getInfoW(obj), obj.point);
}
var startPlaceResults = null;
var startPlacePoint;
var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
var DrivingWay=$("#driving_way select").val();
function search(start,end,route){
driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});
// driving.search(startPlace, toPlace);
}
// var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true, panel: 'drivingPanel'}});//创建一个驾车导航实例
var startPlaceOption = {
onSearchComplete: function (results) {
// 判断状态是否正确
if (startPlaceSearch.getStatus() == BMAP_STATUS_SUCCESS) {
startPlaceResults = results;
var s = [];
map.clearOverlays();
for (var i = 0; i < results.getCurrentNumPois(); i++) {
s.push("<div><p><a onmouseover='getInfoW_M(startPlaceResults.getPoi(" + i + "))' href='#'>");
s.push(results.getPoi(i).title);
s.push("</a></p><p>");
s.push(results.getPoi(i).address);
s.push("</p></div>");
var marker_c = new BMap.Marker(results.getPoi(i).point);
(function () {
var cur = i;
var mak = marker_c;
mak.addEventListener("click", function () {
startPlacePoint = results.getPoi(cur).point;
this.openInfoWindow(getInfoW(results.getPoi(cur))); // 打开信息窗口
});
})();
map.addOverlay(marker_c); // 将标注添加到地图中
}
document.getElementById("startPlacePanel").innerHTML = s.join("");
} else { startPlaceResults = null; alert("没有搜索到路线，请确定起点是否有效!"); }
}
};
function startPlaceDeter() {
map.clearOverlays();
var marker = new BMap.Marker(startPlacePoint);
map.addOverlay(marker);
map.addOverlay(new BMap.Marker(point));
driving.search(startPlacePoint, point);
document.getElementById("startPlacePanel").style.display = "none";
}
var startPlaceSearch = new BMap.LocalSearch(map, startPlaceOption);
$("#btnSearch").click(function(){
search(startPlace, toPlace,routePolicy[DrivingWay]);
var startPlace = document.getElementById("startPlace").value;
startPlaceSearch.search(startPlace);
var toPlace = $("#endPlace").val();
//driving.search(startPlace, toPlace);
map.clearOverlays();
driving.search(startPlace, toPlace);
document.getElementById("box").style.display = "block";
document.getElementById("startPlacePanel").style.display = "block";
});
///
//三种驾车策略：最少时间，最短距离，避开高速
//var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
// $("#result").click(function(){
// map.clearOverlays();
// var i=$("#driving_way select").val();
// search(start,end,routePolicy[i]);
// function search(start,end,route){
// var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});
// driving.search(start,end);
// }
// });
////////
//控制收起/展开
$("#btnExpand").click(function () {
$(this).text($(this).text() == "(收起)" ? "(展开)" : "(收起)");
if ($(this).text() == "(收起)") {
$("#startPlacePanel").show();
} else {
$("#startPlacePanel").hide();
}
});
</script>
<script>
var sel = document.getElementById('stylelist');
for(var key in mapstyles){
var style = mapstyles[key];
var item = new Option(style.title,key);
sel.options.add(item);
}
changeMapStyle('midnight')
sel.value = 'midnight';
function changeMapStyle(style){
map.setMapStyle({style:style});
$('#desc').html(mapstyles[style].desc);
}
//路书
</script>
</body>
</html>
locate.htm 0 → 100644
浏览文件 @ 6a07bc47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>locate</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script src="script/jquery.js" type="text/javascript"></script>
<!-- http://api.map.baidu.com/api?v=2.0&ak=您的密钥" -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0B3c1575c78bfb0d1c52a0660cae3491"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
</head>
<body>
<div class="boxmap" id="container">
<script type="text/javascript">
var setindex = 0;
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(114.338053,30.583184); // 创建点坐标 为我们的教室的坐标
var marker = new BMap.Marker(point); // 创建标注，标注到我们教室
map.enableScrollWheelZoom();
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(20, 10) }));
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }));
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>湖北大学(武昌主校区)物电大楼计信学院 </h4>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
function getInfoW(obj) {
var startPlaceInfowin = new BMap.InfoWindow("</br>" + obj.title + "</br>" + obj.address + "<p class='t-c'><input value='选为起点' type='button' onclick='startPlaceDeter();' /></p>");
return startPlaceInfowin;
}
function getInfoW_M(obj) {
startPlacePoint = obj.point;
map.openInfoWindow(getInfoW(obj), obj.point);
}
var startPlaceResults = null;
var startPlacePoint;
var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
var DrivingWay=$("#driving_way select").val();
function search(start,end,route){
driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});
// driving.search(startPlace, toPlace);
}
// var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true, panel: 'drivingPanel'}});//创建一个驾车导航实例
var startPlaceOption = {
onSearchComplete: function (results) {
// 判断状态是否正确
if (startPlaceSearch.getStatus() == BMAP_STATUS_SUCCESS) {
startPlaceResults = results;
var s = [];
map.clearOverlays();
for (var i = 0; i < results.getCurrentNumPois(); i++) {
s.push("<div><p><a onmouseover='getInfoW_M(startPlaceResults.getPoi(" + i + "))' href='#'>");
s.push(results.getPoi(i).title);
s.push("</a></p><p>");
s.push(results.getPoi(i).address);
s.push("</p></div>");
var marker_c = new BMap.Marker(results.getPoi(i).point);
(function () {
var cur = i;
var mak = marker_c;
mak.addEventListener("click", function () {
startPlacePoint = results.getPoi(cur).point;
this.openInfoWindow(getInfoW(results.getPoi(cur))); // 打开信息窗口
});
})();
map.addOverlay(marker_c); // 将标注添加到地图中
}
document.getElementById("startPlacePanel").innerHTML = s.join("");
} else { startPlaceResults = null; alert("没有搜索到路线，请确定起点是否有效!"); }
}
};
function startPlaceDeter() {
map.clearOverlays();
var marker = new BMap.Marker(startPlacePoint);
map.addOverlay(marker);
map.addOverlay(new BMap.Marker(point));
driving.search(startPlacePoint, point);
document.getElementById("startPlacePanel").style.display = "none";
}
var startPlaceSearch = new BMap.LocalSearch(map, startPlaceOption);
$("#btnSearch").click(function(){
search(startPlace, toPlace,routePolicy[DrivingWay]);
var startPlace = document.getElementById("startPlace").value;
startPlaceSearch.search(startPlace);
var toPlace = $("#endPlace").val();
//driving.search(startPlace, toPlace);
map.clearOverlays();
driving.search(startPlace, toPlace);
document.getElementById("box").style.display = "block";
document.getElementById("startPlacePanel").style.display = "block";
});
///
//三种驾车策略：最少时间，最短距离，避开高速
//var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
// $("#result").click(function(){
// map.clearOverlays();
// var i=$("#driving_way select").val();
// search(start,end,routePolicy[i]);
// function search(start,end,route){
// var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});
// driving.search(start,end);
// }
// });
////////
//控制收起/展开
$("#btnExpand").click(function () {
$(this).text($(this).text() == "(收起)" ? "(展开)" : "(收起)");
if ($(this).text() == "(收起)") {
$("#startPlacePanel").show();
} else {
$("#startPlacePanel").hide();
}
});
</script>
<script>
var sel = document.getElementById('stylelist');
for(var key in mapstyles){
var style = mapstyles[key];
var item = new Option(style.title,key);
sel.options.add(item);
}
changeMapStyle('midnight')
sel.value = 'midnight';
function changeMapStyle(style){
map.setMapStyle({style:style});
$('#desc').html(mapstyles[style].desc);
}
//路书
</script>
</body>
</html>
script/jquery.js 0 → 100644
浏览文件 @ 6a07bc47
此差异已折叠。
script/jquery.min.js 0 → 100644
浏览文件 @ 6a07bc47
此差异已折叠。
style/style.css 0 → 100644
浏览文件 @ 6a07bc47
body
{
font-size: 12px;
background:#CCC
}
#startPanel p, #endPanel p
{
margin: 0;
padding: 0;
line-height: 1.2em;
}
#startPanel div, #endPanel div
{
padding: 5px;
}
#startPanel, #endPanel
{
border: 1px solid #FA8722;
font-size: 12px;
}
h5 {
line-height: 3em;
padding: 0;
margin: 0;
}
.boxpanel
{
width: 217px;
float: right;
border: 1px solid gray;
padding: 0 2px 10px;
height: 600px;
overflow-y: auto;
}
#container
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
.eMapsInfo
{
width: 787px;
margin: 0 auto;
padding: 20px 0;
position: relative;
}
.eMaps
{
border: 6px solid #d2e0ee;
background: #fff;
height: 552px;
width: 552px;
float: left;
}
.eMapsTop
{
height: 45px;
padding-top: 20px;
color: #333333;
font-size: 14px;
}
body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result,#r-result table{width:100%;}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或