百度地图动态添加轨迹坐标点

最新推荐文章于 2024-08-08 09:03:02 发布

Charles.zhang

最新推荐文章于 2024-08-08 09:03:02 发布

阅读量2.5k

点赞数 1

分类专栏：编程开发 # 数据可视化

原文链接：https://www.cnblogs.com/ttxbc/p/6575307.html

版权

数据可视化同时被 2 个专栏收录

5 篇文章 6 订阅

订阅专栏

编程开发

3 篇文章 0 订阅

订阅专栏

1、首先成为百度开发者(注意选择浏览器端和JavascriptAPI)

2、申请秘钥(如果不想对访问网址进行限制的话 Referer白名单使用 * )

3、生成轨迹代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度地图轨迹运动</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YOUR KEY"></script>
    <style type="text/css">
        #allmap {
            width: auto;
            height: 600px;
            border: 1px solid gray;
        }

        #user1 {
            top: 80px;
        }

        #user2 {
            top: 200px;
        }

        .user-list {
            right: 25px;
            position: fixed;
            border: 1px solid #c0c0c0;
            width: 180px;
            height: 110px;
            background: #fff;
            border-radius: 10px;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.8;
            opacity: 0.8;
        }

            .user-list ul {
                list-style-type: none;
                padding-left: 10px;
            }

                .user-list ul li {
                    padding-bottom: 10px;
                }
    </style>
</head>
<body>
    经度：<input id="lng" type="text" placeholder="输入地图经度">
    纬度：<input id="lat" type="text" placeholder="输入地图纬度" required="">
    <button id="addPoint" onclick="run();">添加轨迹</button><br /><br />
    <div id="allmap"></div>
    <div id="user1" class="user-list">
        <ul>
            <li>姓名：张三</li>
            <li>职务：3</li>
            <li>电话：13552307638</li>
        </ul>
    </div>
    <div id="user2" class="user-list">
        <ul>
            <li>姓名：李四</li>
            <li>职务：3</li>
            <li>电话：13552307638</li>
        </ul>
    </div>
    <script type="text/javascript">
        //百度地图API
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
        map.enableScrollWheelZoom(true);                            //启动滚轮放大缩小
        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件

        var poinArr = new Array();

        poinArr[poinArr.length] = new BMap.Point(106.521436, 29.532288);    //起点默认为重庆
        
        //起点-重庆         106.521436, 29.532288    添加到文本框的几点坐标点（测试）,注意坐标点需要有规律些喔！
        //终点-西安         108.983569, 34.285675
        //终点-北京         116.404449, 39.920423
        //终点-沈阳         123.432790, 41.808644
        window.run = function () {
            var log = document.getElementById("lng").value;             //地图经度
            var lat = document.getElementById("lat").value;             //地图纬度
           
            //根据用户添加的点动态添加地图轨迹
            poinArr[poinArr.length] = new BMap.Point(log, lat);
            map.clearOverlays();                        //清除地图上所有的覆盖物
            var driving = new BMap.DrivingRoute(map);    //创建驾车实例

            if (poinArr.length > 1) {
                for (var i = 1; i < poinArr.length; i++) {
                    driving.search(poinArr[i - 1], poinArr[i]);
                }
            }
            driving.setSearchCompleteCallback(function () {
                var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                var polyline = new BMap.Polyline(pts);
                map.addOverlay(polyline);
                var m1 = new BMap.Marker(poinArr[0]);
                map.addOverlay(m1);                                         //红标记
                lab1 = new BMap.Label("起点", { position: poinArr[0] });
                map.addOverlay(lab1);                                       //标记起点
                for (var i = 1; i < poinArr.length; i++) {
                    var m = new BMap.Marker(poinArr[i]);
                    map.addOverlay(m);
                    lab = new BMap.Label("终点", { position: poinArr[i] });
                    map.addOverlay(lab);
                }
                setTimeout(function () {
                    map.setViewport(poinArr);          //调整到最佳视野
                }, 1000);
            });
        }
    </script>
</body>
</html>