您的位置：首页 > 其它

路书

2015-10-15 21:06 288 查看

<!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">

    

<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").onclick=function(){lushu.start();};

$("stop").onclick=function(){lushu.stop();};

$("hide").onclick=function(){lushu.hideInfoWindow();};

$("pause").onclick=function(){lushu.pause();};

$("show").onclick=function(){lushu.shoeInfoWindow();};

function $(element){return document.getElementById(element);}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航