<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中国传媒大学</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Oi0fQN3GNXe2vEWNGtBLZy2xtvZaYnd5">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerManager/1.2/src/MarkerManager_min.js"></script>
<script type="text/javascript" src="./lib/liblushu.js"></script>
</head>
<body>
<div id="map_container" style="1000px;height:640px;"></div>
<button id="showAllAP">显示AP位置</button>
<button id="hideAllAP">隐藏AP位置</button>
<button id="run" >run</button>
<button id="stop">stop</button>
<button id="pause">pause</button>
<button id="hide">hide infoWindow</button>
<button id="show">show infoWindow</button>
<script type="text/javascript">
var map = new BMap.Map("map_container"); // 创建地图实例
var pointCenter = new BMap.Point(116.564055,39.91873); // 创建地图中心点坐标
map.centerAndZoom(pointCenter, 18); // 初始化地图，设置中心点坐标和地图级别
//map.addControl(new BMap.NavigationControl()); //添加缩放控件
//map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(); //添加鼠标缩放
//map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); //添加缩略图控件
var padding = 200;
var mgr = new BMapLib.MarkerManager(map,{
borderPadding: padding
,maxZoom: 18
,trackMarkers: true
});
var markersConfig = [{minZoom: 1, maxZoom: 10, markerCount:80 }
,{minZoom: 11, maxZoom: 12, markerCount:10 }
,{minZoom: 13, maxZoom: 15, markerCount:150 }
,{minZoom: 16, maxZoom: 17, markerCount:10 }
,{minZoom: 18, maxZoom: 19, markerCount:100 }
];
var allAPMarkers = getAllAPMarker();
mgr.addMarkers(allAPMarkers);
for (var i = 0; i < allAPMarkers.length; i++) {
allAPMarkers[i].setAnimation(BMAP_ANIMATION_DROP);
};
mgr.showMarkers();
$("showAllAP").onclick = function(){
mgr.show();
}
$("hideAllAP").onclick = function(){
mgr.hide();
}
function getAllAPMarker(){
var allAPPosition = [{log:116.560691,lat:39.920691}, {log:116.561149,lat:39.920698},
{log:116.560736,lat:39.920263}, {log:116.561194,lat:39.920256}, //一餐厅
{log:116.56379,lat:39.920857}, {log:116.563368,lat:39.920352},
{log:116.564652,lat:39.920885}, {log:116.565092,lat:39.920415}, //图书馆
{log:116.561113,lat:39.918457}, {log:116.561652,lat:39.918464},
{log:116.561131,lat:39.918319}, {log:116.561661,lat:39.918333}, //三号楼
{log:116.563772,lat:39.918941}, {log:116.56467,lat:39.918997},
{log:116.56379,lat:39.918762}, {log:116.564715,lat:39.918796}, //教学楼
{log:116.566997,lat:39.919626}, {log:116.568111,lat:39.919723},
{log:116.567024,lat:39.919419}, {log:116.568147,lat:39.919481}]; //运动场
var myIcon = new BMap.Icon("./img/ap.png", new BMap.Size(23, 25));
var markers = [];
for (var i = 0; i < allAPPosition.length; i++) {
var e = new BMap.Point(allAPPosition[i].log, allAPPosition[i].lat);
markers[i] = new BMap.Marker(e, {icon:myIcon});
};
return markers;
}
function $(id){
return document.getElementById(id);
}
function getAllStationPoints(){
var allAPPosition = [{log:116.561454,lat:39.918346}, //寝室
{log:116.561104,lat:39.920346}, //食堂
{log:116.564239,lat:39.920546}, //图书馆
{log:116.564401,lat:39.918789}, //教学楼
{log:116.567661,lat:39.919578}]; //运动场
}
//画点
var point3 = new BMap.Point(116.561454,39.918346); //寝室
var pointCafeteria = new BMap.Point(116.561104,39.920346); //食堂
var pointLibrary = new BMap.Point(116.564239,39.920546); //图书馆
var pointClassroom = new BMap.Point(116.564401,39.918789); //教学楼
var pointPlayGround = new BMap.Point(116.567661,39.919578); //运动场
var allStaPoints = [point3, //寝室
pointCafeteria, //食堂
pointLibrary, //图书馆
pointClassroom, //教学楼
pointPlayGround]; //运动场
var stationMarkers = [];
for (var i = 0; i < allStaPoints.length; i++) {
stationMarkers[i] = new BMap.Marker(allStaPoints[i]);
map.addOverlay(stationMarkers[i]);
};
//画线
/*var polyline = new BMap.Polyline([
point3,
pointCafeteria,
pointLibrary,
pointClassroom,
pointPlayGround
], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(polyline);*/
var runIcon = new BMap.Icon("./img/bluestar.ico", new BMap.Size(30, 30));
var lushu;
var finishFlag = 0;
var allWalkingPois = [];
var walk = new BMap.WalkingRoute(map, {
onSearchComplete: searchComplete
});
var i = 0;
walk.search(allStaPoints[i], allStaPoints[i+1]);
function searchComplete(res) {
if (walk.getStatus() == BMAP_STATUS_SUCCESS) {
var arrPois = res.getPlan(0).getRoute(0).getPath();
allWalkingPois = allWalkingPois.concat(arrPois);
finishFlag++;
if (finishFlag == (allStaPoints.length-1)){
map.addOverlay(new BMap.Polyline(allWalkingPois, {strokeColor: 'blue'}));
map.setViewport(allWalkingPois);
map.setZoom(18);
map.setCenter(pointCenter);
lushu = new BMapLib.LuShu(map,allWalkingPois,{
defaultContent:"",
//autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
icon : runIcon,
speed: 100,
enableRotation:true,//是否设置marker随着道路的走向进行旋转
});
}else{
i++;
walk.search(allStaPoints[i], allStaPoints[i+1]);
}
}
}
//绑定事件
$("run").onclick = function(){
lushu.start();
}
$("stop").onclick = function(){
lushu.stop();
}
$("pause").onclick = function(){
lushu.pause();
}
$("hide").onclick = function(){
lushu.hideInfoWindow();
}
$("show").onclick = function(){
lushu.showInfoWindow();
}
function $(element){
return document.getElementById(element);
}
</script>
</body>
</html>