|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="海师后院为海师人定制的地图服务，让你在茫茫人海中有一个明确的方向感！！！" />
<meta name="keywords" content="海南师范大学地图 海南师范大学在哪里 海南师范大学公交车 海南师范大学南校区 海师后院 海南大学城 海南桂林洋高校区 桂林洋大学城 " />
<title>海南师范大学地图 海南师范大学公交导航 海南师范大学在哪里 </title>
<script type="text/javascript" src=""></script>
<!--<script src="js/Control.js" type="text/javascript"></script>-->
<!--当您引用地图API文件时，需要使用自己申请的API密钥-->
</head>
<body>
<!--顶部信息-->
<div style="width: 98%; float: left;">
<img style="display: block; float: left;" src=""
alt="海南师范大学论坛" />
<div style="width: 730px; height: 100px; float: left;">
<script type="text/javascript"><!--
google_ad_client = "pub-7628071263867490";
/* 728x90, 创建于 09-6-17 */
google_ad_slot = "3844049738";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="">
</script>
</div>
</div>
<div id="myad" style="width: 98%; color: Red; margin-top: 10px; margin-bottom: 0">
海师后院为海师人定制的地图服务，让你在茫茫人海中有一个明确的方向感！！！ ----by <a href="mailto:an_boy@qq.com">天空从何开始</a></div>
<!--创建地图容器元素-->
<div style="width: 800px; float: left; margin-top: 10px;">
<div style="width: 800px; float: left; margin-left: 0; height: 600px; border: 1px solid gray"
id="container">
</div>
<div id="tips" style="margin-top: 20px;">
<hr />
<h3>
海师后院相关链接：</h3>
<span style="display: block; margin-top: 5px;"><a href=""
target="_blank">海口火车时刻表价格及火车站图</a></span> <span style="display: block; margin-top: 5px;">
<a href="" target="_blank"><b>海师后院第一楼！新生问题集锦！</b></a></span>
<span style="display: block; margin-top: 5px;"><a href=""
target="_blank">海师后院 乐乐礼品店 促销中...(hot)</a></span> <span style="display: block; margin-top: 5px;">
<a href="" target="_blank">海师新生招生咨询~~</a></span>
</div>
</div>
<!--信息显示区-->
<div style="float: left; margin-top: 10px;">
<div id="Div1" style="font-size: medium; font-weight: bold; color: Red; margin-bottom: 10px;">
海南师范大学老校区</div>
<div id="results1">
</div>
<div id="Div2" style="font-size: medium; font-weight: bold; color: Red; margin-top: 10px;
margin-bottom: 10px;">
桂林洋高校区 海南师范大学新校区</div>
<div id="results2">
</div>
<div style="font-size: medium; font-weight: bold; color: Red; margin-top: 10px; margin-bottom: 10px;">
公交导航</div>
<div id="recommend">
<h3>
推荐路线(点击查看)</h3>
<input size="28" style="border-bottom-style: outset; color: Blue;" value="美兰机场--海南师范大学南校区"
onclick="searchbus('美兰机场','海南师范大学')" />
<input size="28" style="border-bottom-style: outset; color: Blue;" value="火车站--海南师范大学南校区"
onclick="searchbus('火车站','海南师范大学')" />
<input size="28" style="border-bottom-style: outset; color: Blue;" value="新港--海南师范大学南校区"
onclick="searchbus('新港','海南师范大学')" />
<input size="28" style="border-bottom-style: outset; color: Blue;" value="海南大学--海南师范大学南校区"
onclick="searchbus('海南大学','海南师范大学')" />
</div>
<div id="search">
起点<input id="busstart" type="text" size="20" value="海南师范大学" />终点<input id="busend"
type="text" size="20" value="明珠广场" /><input type="button" value="公汽搜索" onclick="searchbus(busstart.value,busend.value)" /></div>
<div id="bus">
</div>
</div>
<div id="info" style="margin-top: 20px; clear: left;">
</div>
<div id="msg" style="margin-top: 20px">
</div>
<hr />
<div id="footer" style="width: 98%; vertical-align: middle; margin-left: 40%">
Copyright © <a href="" target="_blank">海师后院</a> Some
Rights Reserved</div>
</body>
</html>
<script type="text/javascript">
// 创建地图实例
var map = new BMap.Map("container");
// 创建点坐标 Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。
var point = new BMap.Point(110.346, 20.004); //北纬19°32′－20°05′，东经110°10′－110°41′ 110.333, 20.015
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
//键盘的上、下、左、右键可连续移动地图
map.enableKeyboard();
//启用双击放大
map.enableDoubleClickZoom();
//启用滚轮放大缩小
map.enableScrollWheelZoom();
//启用地图拖拽
map.enableDragging();
// window.setTimeout(function() {
// map.panTo(new BMap.Point(110.346, 20.004)); //110.346852, 20.004335
// }, 2000);
map.addControl(new BMap.ScaleControl()); // 添加一个比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加一个缩略图控件
var opts = { anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)}//将标准地图控件放置在地图的右上角，间隔10个像素。
map.addControl(new BMap.NavigationControl(opts)); //添加一个平移缩放控件
myZoomCtrl = new ZoomControl(); //实例化，添加一个放大控件
map.addControl(myZoomCtrl);
myZoomCtrl2 = new ZoomControl2(); //实例化，添加一个缩小控件
map.addControl(myZoomCtrl2);
//var marker = new BMap.Marker(point); // 创建标注
//map.addOverlay(marker); // 将标注添加到地图中
map.addContextMenu("menu:ContextMenu"); //添加右键菜单
// 随机向地图添加10个标注
// var bounds = map.getBounds(); //地图状态方法 返回地图可视区域，以地理坐标表示
// var lngSpan = bounds.maxX - bounds.minX;
// var latSpan = bounds.maxY - bounds.minY;
// for (var i = 0; i < 10; i++) {
// var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),
// bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));
// addMarker(point, i);
// }
// //搜索海南师范大学
// var local = new BMap.LocalSearch(map, {
// renderOptions: { map: map }
// });
// local.search("海南师范大学");
// var local = new BMap.LocalSearch(map, {
// renderOptions: { map: map }
// });
// local.search("海南师范大学图书馆");
//ZoomControl 放大两级
// 定义一个控件类，即function
function ZoomControl() {
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map) {
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件，点击一次放大两级
div.onclick = function(e) {
map.zoomTo(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
//---------------------------------------------------------------------------------------//
//定义一个控件类，点击时缩小地图1级
function ZoomControl2() {
//设置默认停靠位置和偏移量
this.defaultAnthor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 10);
}
ZoomControl2.prototype = new BMap.Control(); //继承BMap.Control
ZoomControl2.prototype.initialize = function(map) {
var div = document.createElement("div"); //创建一个DOM元素
div.appendChild(document.createTextNode("缩小1级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
//绑定事件，点击一次缩小一级
div.onclick = function() {
map.zoomTo(map.getZoom() - 1);
}
//添加DOM元素到地图中
map.getContainer().appendChild(div);
//将DOM元素返回
return div;
}
//---------------------------------------------------------------------------------------//
// 编写自定义函数，创建标注
function addMarker(point, index) {
// 创建图标对象
var myIcon = new BMap.Icon("", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
}
var local = new BMap.LocalSearch("海口市", {
renderOptions: {
map: map,
pageCapacity: 6,
autoViewport: true,
selectFirstResult: false,
panel: "results1"
}
});
local.search("海南师范大学");
var local = new BMap.LocalSearch("海口市", {
renderOptions: {
map: map,
pageCapacity: 6,
autoViewport: true,
selectFirstResult: false,
panel: "results2"
}
});
local.search("桂林洋高校区");
// var local = new BMap.LocalSearch(map, {
// renderOptions: { map: map }
// });
// local.search("桂林洋高校区");
//事件监听 addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数
// map.addEventListener("click", function() {
// alert("您点击了地图。");
// });
//通过监听事件捕获事件触发后的状态 显示用户拖动地图后地图中心的经纬度信息
// map.addEventListener("dragend", function() {
// var center = map.getCenter();
// document.getElementById("info").innerHTML = center.lng + ", " + center.lat;
// });
// map.addEventListener("click", function(e) {
// document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat;
// });
//移除监听事件
function showInfo(e) {
document.getElementById("info").innerHTML = "您点击位置的经度：" + e.point.lng + ", 纬度：" + e.point.lat + ",如需查看其他位置经纬度，请刷新后点击~~";
alert("海师后院踏遍天涯海角四处寻觅海师人！");
map.removeEventListener("click", showInfo);
}
map.addEventListener("click", showInfo);
//添加图层
// var tilelayer = new BMap.TileLayer(); // 创建地图层实例
// tilelayer.getTilesUrl = function() { // 设置图块路径
// return "";
// };
// document.getElementById("msg").innerHTML = tilelayer.getCopyright("海南师范大学论坛");
// map.addTileLayer(tilelayer);
//公交导航
function searchbus(busstartval, busendval) {
var transit = new BMap.TransitRoute(map, {
renderOptions: {
map: map,
pageCapacity: 10,
autoViewport: true,
selectFirstResult: false,
panel: "bus"
}
});
transit.search(busstartval, busendval);
}
searchbus("海南师范大学", "明珠广场")
//数据接口 路线图
function busandgo(addr1, addr2) {
//var map = new BMap.Map("container");
// 创建点坐标 Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。
// var point = new BMap.Point(110.346, 20.004); //北纬19°32′－20°05′，东经110°10′－110°41′ 110.333, 20.015
// 初始化地图，设置中心点坐标和地图级别
// map.centerAndZoom(point, 15);
var transit = new BMap.TransitRoute("海口市");
transit.setSearchCompleteCallback(function(results) {
if (transit.getStatus() == BMAP_STATUS_SUCCESS) {
var firstPlan = results.getPlan(0);
// 绘制步行线路
for (var i = 0; i < firstPlan.getNumRoutes(); i++) {
var walk = firstPlan.getRoute(i);
if (walk.getDistance(false) > 0) {
// 步行线路有可能为0
map.addOverlay(new BMap.Polyline(walk.getPoints(), { lineColor: "green" }));
}
}
// 绘制公交线路
for (i = 0; i < firstPlan.getNumLines(); i++) {
var line = firstPlan.getLine(i);
map.addOverlay(new BMap.Polyline(line.getPoints()));
}
// 输出方案信息
var s = [];
for (i = 0; i < results.getNumPlans(); i++) {
s.push((i + 1) + ". " + results.getPlan(i).getDescription());
alert(i);
}
document.getElementById("msg").innerHTML = s.join("
");
}
})
transit.search(addr1, addr2);
}
//busandgo("海南师范大学", "明珠广场");
</script>
|
