庄锐波
3 months ago
7 changed files with 42 additions and 92 deletions
@ -1,88 +0,0 @@ |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>路书</title> |
|||
<style type="text/css"> |
|||
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} |
|||
#map_canvas{width:100%;height:700px;} |
|||
#result {width:100%} |
|||
</style> |
|||
<script> |
|||
window.BMAP_AUTHENTIC_KEY = '7Cc5Kmn672miPzG4qQhvlOrERcXMMinq'; |
|||
</script> |
|||
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script> |
|||
<script type="text/javascript" src="//bj.bcebos.com/v1/mapopen/github/BMapGLLib/Lushu/src/Lushu.min.js"></script> |
|||
</head> |
|||
<body> |
|||
<div id="map_canvas"></div> |
|||
<div id="result"></div> |
|||
<button id="run">开始</button> |
|||
<button id="stop">停止</button> |
|||
<button id="clear">清除</button> |
|||
<button id="pause">暂停</button> |
|||
<button id="hide">隐藏信息窗口</button> |
|||
<button id="show">展示信息窗口</button> |
|||
<input type="text" /> |
|||
<script> |
|||
var map = new BMapGL.Map('map_canvas'); |
|||
map.enableScrollWheelZoom(); |
|||
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 13); |
|||
|
|||
var lushu; |
|||
// 实例化一个驾车导航用来生成路线 |
|||
var drv = new BMapGL.DrivingRoute('北京', { |
|||
onSearchComplete: function(res) { |
|||
if (drv.getStatus() == BMAP_STATUS_SUCCESS) { |
|||
var plan = res.getPlan(0); |
|||
var arrPois =[]; |
|||
for(var j=0;j<plan.getNumRoutes();j++){ |
|||
var route = plan.getRoute(j); |
|||
arrPois= arrPois.concat(route.getPath()); |
|||
} |
|||
map.addOverlay(new BMapGL.Polyline(arrPois, {strokeColor: '#111'})); |
|||
map.setViewport(arrPois); |
|||
|
|||
lushu = new BMapGLLib.LuShu(map, arrPois, { |
|||
defaultContent: '', // "从天安门到百度大厦" |
|||
autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整 |
|||
icon: new BMapGL.Icon('./img/car.png', new BMapGL.Size(32, 32), {anchor: new BMapGL.Size(10, 10)}), |
|||
speed: 500, |
|||
enableRotation: true, // 是否设置marker随着道路的走向进行旋转 |
|||
// landmarkPois: [ |
|||
// {lng:116.314782, lat:39.913508, html:'加油站', pauseTime:2}, |
|||
// {lng:116.315391, lat:39.964429, html:'高速公路收费<div><img src="//map.baidu.com/img/logo-map.gif"/></div>', pauseTime:3}, |
|||
// {lng:116.381476, lat:39.974073, html:'肯德基早餐', pauseTime:2} |
|||
// ] |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
var start=new BMapGL.Point(116.404844, 40); |
|||
var end=new BMapGL.Point(116.308102, 40.056057); |
|||
drv.search(start, end); |
|||
|
|||
//绑定事件 |
|||
$("run").onclick = function(){ |
|||
lushu.start(); |
|||
} |
|||
$("stop").onclick = function(){ |
|||
lushu.stop(); |
|||
} |
|||
$("clear").onclick = function(){ |
|||
lushu.clear(); |
|||
} |
|||
$("pause").onclick = function(){ |
|||
lushu.pause(); |
|||
} |
|||
$("hide").onclick = function(){ |
|||
lushu.hideInfoWindow(); |
|||
} |
|||
$("show").onclick = function(){ |
|||
lushu.showInfoWindow(); |
|||
} |
|||
function $(element){ |
|||
return document.getElementById(element); |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue