路书

最新推荐文章于 2023-10-20 10:06:49 发布

弥漫花香

最新推荐文章于 2023-10-20 10:06:49 发布

阅读量560

点赞数

分类专栏：地图

本文链接：https://blog.csdn.net/u012246905/article/details/49158593

版权

地图专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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").ο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);}