百度地图-路书

最新推荐文章于 2023-10-08 11:57:24 发布

frank_hehe

最新推荐文章于 2023-10-08 11:57:24 发布

阅读量1.7k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/frank_hehe/article/details/103258880

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了一个基于HTML、CSS和JavaScript的路书导航系统实现，使用百度地图API和LuShu库，展示了如何加载地图、绘制路径并控制路书动画。通过按钮控制，可以开始、暂停、跳转和重置路书播放。

摘要由CSDN通过智能技术生成

一、HTML部分

<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="../jquery-3.3.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script></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="tiao1">跳1</button>
<button id="tiao2">跳2</button>
<button id="tiao3">跳3</button>
<button id="cz">重置</button>
</body>
</html>

二、JS部分

 var lushu;
    var tiao=[];
    var suData;
    function manInit(){
        $.get({
            url:"data.json",
            success:function (data) {
                suData=data.data.path[0].point;
                let points=[];
                data.data.path[0].point.forEach(function (po) {
                    let poi=new BMap.Point(po.x,po.y);
                    poi.type=po.type;
                    poi.name=po.name;
                    poi.date=po.date;
                    points.push(poi);
                });
                var map = new BMap.Map('map_canvas');
                map.enableScrollWheelZoom();
                map.centerAndZoom(points[0], 12);

                map.addOverlay(new BMap.Polyline(points, {strokeColor: 'red'}));
                lushu = new BMapLib.LuShu(map,points,{
                    defaultContent:"",
                    autoView:true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                    icon  : new BMap.Icon('timg.jpg', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                    speed: 4500,
                    enableRotation:true,//是否设置marker随着道路的走向进行旋转
                    landmarkPois: points
                });
                for (let i=0;i<points.length;i++){
                    let ma=new BMap.Marker(points[i],{icon:'',title:points[i].name+'\n'+points[i].date});
                    map.addOverlay(ma);//覆盖标注到地图上
                    ma.type=points[i].type;
                    tiao.push(ma);
                }
            }
        });
    }
    manInit();
    //绑定事件
    select("run").onclick = function(){
        lushu.start();
    };
    select("tiao1").onclick = function(){
        tiaoFun(1)
    };
    select("tiao2").onclick = function(){
        tiaoFun(2)
    };
    select("tiao3").onclick = function(){
        tiaoFun(3)
    };
    select("cz").onclick = function(){
        manInit();
    };
    function select(element){
        return document.getElementById(element);
    }
    function tiaoFun(type) {
        console.log(tiao)
       tiao.forEach(function (ti) {
           if(ti.flag){
               ti.setAnimation(null);
               ti.flag=false;
           }else if(ti.type == type){
               console.log(1)
              ti.setAnimation(BMAP_ANIMATION_BOUNCE);
              ti.flag=true;
          }
       })
    }