【GIS】利用高德地图API绘制轨迹

维吉斯蔡

已于 2024-04-15 20:40:32 修改

阅读量2.1k

点赞数 4

文章标签： javascript

于 2024-03-06 23:14:57 首次发布

本文链接：https://blog.csdn.net/hanv79/article/details/136520029

版权

实验描述

本次实验使用了高德地图API轨迹的绘制。
通过点击路线1按钮即可显示轨迹：
在这里插入图片描述
点击路线2按钮即可显示另一条轨迹：

讲解

参考视频：讲解视频

参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德地图API绘制轨迹</title>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '【您的秘钥】'}
    </script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=【您的key】&plugin=AMap.Driving,AMap.Walking"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style type="text/css">
        html,
        body,
        #container {
            width: 99.99%;
            height: 98%;
        }
        .btn {
            /* 按钮美化 */
            width: 100px;
            /* 宽度 */
            height: 30px;
            /* 高度 */
            border-width: 0px;
            /* 边框宽度 */
            border-radius: 5px;
            /* 边框半径 */
            background: #1E90FF;
            /* 背景颜色 */
            cursor: pointer;
            /* 鼠标移入按钮范围时出现手势 */
            outline: none;
            /* 不显示轮廓线 */
            font-family: Microsoft YaHei;
            /* 设置字体 */
            color: white;
            /* 字体颜色 */
            font-size: 17px;
            /* 字体大小 */
        }
        .btn:hover {
            /* 鼠标移入按钮范围时改变颜色 */
            background: #5599FF;
        }
    </style>
    <script>
    	// 轨迹1的途经点数据
        people01 = [
            [103.637195, 36.08536],
            [103.725881, 36.107875],
            [103.738439, 36.09808],
            [103.859546, 36.046674]
        ]
        // 轨迹2的途经点数据
        people02 = [
            [103.66207, 36.087118],
            [103.697089, 36.099151],
            [103.727215, 36.082922],
            [103.752309, 36.068972],
            [103.816907, 36.0594]
        ]
    </script>
</head>
<body>
    <input class="btn" type="button" value="路线1" onclick="loadMap(people01)">
    <input class="btn" type="button" value="路线2" onclick="loadMap(people02)">
    <div id="container"></div>
    <script>
        //AMap.Map( , )的第一个参数是对应的容器，第二个参数是设置地图参数的对象
        var map = new AMap.Map('container', {
            zoom: 13,  //设置地图显示的缩放级别
            center: [103.737026, 36.108024],//设置地图中心点坐标，
        });
        function loadMap(people) {
            var map = new AMap.Map('container', {
                zoom: 13,  //设置地图显示的缩放级别
                center: [103.737026, 36.108024],//设置地图中心点坐标，西北师范大学新校区
            });
            //返回经纬度对象
            function convertToLatLng(LatLng) {
                return new AMap.LngLat(LatLng[0], LatLng[1])
            }
            var waypointArray = []
            for (var i = 1; i < people.length - 1; i++) {
                waypointArray.push(convertToLatLng(people[i]))
            }
            console.log(waypointArray)

            var driving = new AMap.Driving({
                map: map,
                //hideMarkers:true,//显示起终点
                showTraffic: false,
            }).search(convertToLatLng(people[0]), convertToLatLng(people[people.length - 1]),
                //{waypoints:[c2b(day[1]),c2b(day[2])]})//途经点最多6个
                {
                    waypoints: waypointArray
                })
        }
    </script>
</body>
</html>