百度地图 路书动态加载规划
<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: 500px;
}
#result {
width: 100%
}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=NqENdsDTP1QxhUn047Z7C6Tfsgv5X1mj"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/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="pause">暂停</button>
<button id="hide">隐藏信息窗口</button>
<button id="show">展示信息窗口</button>
<script>
var map = new BMap.Map('map_canvas')
map.enableScrollWheelZoom()
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13)
var lushu
var arrPois = []
// 实例化一个驾车导航用来生成路线
var drv = new BMap.DrivingRoute('北京', {
onSearchComplete: function (res) {
if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
var plan = res.getPlan(0)
for (var j = 0; j < plan.getNumRoutes(); j++) {
var route = plan.getRoute(j)
arrPois = arrPois.concat(route.getPath())
}
map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}))
map.setViewport(arrPois)
lushu = new BMapLib.LuShu(map, arrPois, {
defaultContent: '',//"从天安门到百度大厦"
autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
icon: new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52, 26), {anchor: new BMap.Size(27, 13)}),
speed: 45000,
enableRotation: true,//是否设置marker随着道路的走向进行旋转
landmarkPois: [
{lng: 116.314782, lat: 39.913508, html: '加油站', pauseTime: 2}
]
})
lushu.start()
setTimeout(function () {
var drv1 = new BMap.DrivingRoute('北京', {
onSearchComplete: function (res) {
if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
var route = res.getPlan(0).getRoute(0)
arrPois.push(...route.getPath())
map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}))
}
}
})
let start1 = new BMap.Point(117.404, 40.915)
let end2 = new BMap.Point(118.404, 41.915)
drv1.search(start1, end2)
}, 3000)
}
}
})
let start = new BMap.Point(116.404, 39.915)
let end = new BMap.Point(117.404, 40.915)
drv.search(start, end)
function $ (element) {
return document.getElementById(element)
}
</script>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
