• 周六. 7 月 13th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

百度地图,移动轨迹

admin

11 月 28, 2021

<!DOCTYPE html>
<html>
<head>
    <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”>
    body, html{ 100%;height: 100%;margin:0;font-family:”微软雅黑”;}
    #allmap { 100%; height:500px; overflow: hidden;}
    #result {100%;font-size:12px;}
    dl,dt,dd,ul,li{
        margin:0;
        padding:0;
        list-style:none;
    }
    p{font-size:12px;}
    dt{
        font-size:14px;
        font-family:”微软雅黑”;
        font-weight:bold;
        border-bottom:1px dotted #000;
        padding:5px 0 5px 5px;
        margin:5px 0;
    }
    dd{
        padding:5px 0 0 5px;
    }
    li{
        line-height:28px;
    }
    </style>
    <script type=”text/javascript” src=”http://api.map.baidu.com/api?v=2.0&ak=您的密钥”></script>
    <!–加载鼠标绘制工具–>
    <script type=”text/javascript” src=”http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js”></script>
    <link rel=”stylesheet” href=”http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css” />
    <!–加载检索信息窗口–>
    <script type=”text/javascript” src=”http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js”></script>
    <link rel=”stylesheet” href=”http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css” />
    <title>鼠标绘制工具</title>
</head>
<body>
    <div id=”allmap” style=”overflow:hidden;zoom:1;position:relative;”>    
        <div id=”map” style=”height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;”></div>
    </div>
    <div id=”result”>
        <input type=”button” value=”获取绘制的覆盖物个数” onclick=”alert(overlays.length)”/>
        <input type=”button” value=”清除所有覆盖物” onclick=”clearAll()”/>
    </div>
    <script type=”text/javascript”>
     // 百度地图实例化          
      var map = new BMap.Map(“allmap”); map.centerAndZoom(new BMap.Point(113.962196, 22.545144), 13); map.enableScrollWheelZoom(); // 允许滚轮缩放         
      // 怎么走的选择         
      var myIcon = new BMap.Icon(“http://developer.baidu.com/map/jsdemo/img/Mario.png”, new BMap.Size(32, 70), {
        //小车图片         
        offset: new BMap.Size(0, -5),
        //相当于CSS精灵         
        imageOffset: new BMap.Size(0, 0)
        //图片的偏移量。为了是图片底部中心对准坐标点。         
      }); var p01 = new BMap.Point(113.962196, 22.545144); var p02 = new BMap.Point(113.987268, 22.54884); var p03 = new BMap.Point(113.976281, 22.53543); var p04 = new BMap.Point(113.957956, 22.539636);
      //生成轨迹线路         
      function run(p3, p2) { p1 = arguments[0]; p2 = arguments[1]; // 生成路径         
                            var walking2 = new BMap.WalkingRoute(map, { renderOptions: { map: map, enableDragging: true, autoViewport: true } }); walking2.search(p1, p2); var walking = new BMap.WalkingRoute(map); walking.search(p1, p2); walking.setSearchCompleteCallback(function () { var pts = walking.getResults().getPlan(0).getRoute(0).getPath();
                                                                                                                                                                                                                                                                                            //得到一个数组         
                                                                                                                                                                                                                                                                                            console.log(pts); setTimeout(function () { jumps(pts); }, 1000); }); }
      // 可以根据轨迹线路跑起来的函数         
      function jumps(pts) { var carMk = new BMap.Marker(pts[0], { icon: myIcon }); map.addOverlay(carMk); var i = 0; function resetMkPoint(i) { carMk.setPosition(pts[i]); if (i < pts.length) { setTimeout(function () { i++; resetMkPoint(i); }, 2); } else { return } } setTimeout(function () { resetMkPoint(1); }, 2) }
      //传入两个点,跑起来吧         
      run(p03, p02);
</script>
</body>
</html>

 ————————————————
版权声明:本文为CSDN博主「xeanyee」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/github_38847071/article/details/72574560

发表回复