路书



<!DOCTYPE html>
<html>
  <head>
    <title>路书</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
html,body{height: 100%;width: 100%;margin: 0;overflow: hidden;font-family: "微软雅黑";}
#allmap{height: 500px;width: 100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
 
  </head>
 
  <body>
    <div id="allmap"></div>
    <button id="run" >开始</button>
    <button id="stop" >停止</button>
    <button id="show" >显示</button>
    <button id="hide">隐藏</button>
    <button id="pause" >暂停</button>
  </body>
</html>
<script type="text/javascript">
var map=new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915),13);
map.enableScrollWheelZoom();
var lushu;
//实例化一个驾车导航用来生成路线
var drv=new BMap.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 BMap.Polyline(arrPois,{strokeColor:"black"}));
map.setViewport(arrPois);
lushu=new BMapLib.LuShu(map,arrPois,{
defaultContent:"",
autoView:true,//自动调节视野,若开启,则路书在运动过程中自动调节视野
icon:new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png",new BMap.Size(52,26),{anchor:new BMap.Size(27,13)}),
speed:4500,
enableRotation:true,
landmarkPois:[{lng:116.314782,lat:39.913508,html:"加油站",pauseTime:2},{lng:116.315391,lat:39.964429,html:'高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/><div>',pauseTime:2},{lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}]});
}}
});
drv.search("天安门","百度大厦");

//绑定事件
$("run").οnclick=function(){lushu.start();};
$("stop").οnclick=function(){lushu.stop();};
$("hide").οnclick=function(){lushu.hideInfoWindow();};
$("pause").οnclick=function(){lushu.pause();};
$("show").οnclick=function(){lushu.shoeInfoWindow();};
function $(element){return document.getElementById(element);}







</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值