高德地图动态绘制多个路线轨迹

最新推荐文章于 2024-03-14 14:54:40 发布

白小宇

最新推荐文章于 2024-03-14 14:54:40 发布

阅读量4.4w

点赞数 9

分类专栏： web前端 JavaScript 文章标签： API javascript Json

本文链接：https://blog.csdn.net/b954960630/article/details/79229556

版权

web前端同时被 2 个专栏收录

121 篇文章 4 订阅

订阅专栏

JavaScript

48 篇文章 0 订阅

订阅专栏

最近在用高德地图的API，顺便记录下。

平时我们只是通过如下代码，给path一串经纬度数组，静态绘制修改路径，但怎么才能通过接收数据（例如Json数据）来动态绘制多个路径呢？这里有两种方法。

//设置数据
 pathSimplifierIns.setData([{
     name: '路线0',
     path: [
         [116.405289, 39.904987],
         [113.964458, 40.54664],
         [111.47836, 41.135964]
     ]
 }]);

方法一：

该方法是官方文档的Dome，
思路： 用 $.getJSON(‘url’,function(){})函数，在其url中直接输入.json文件（文件里是 setData()可操作数组结构的数据）的路径，通过改变文件内容或 url 来动态绘制路径。

查看官方Dome：点击这里
查看数据的网址：点击这里
效果图如下：

但是平时我们传的Json数据的数据结构都是 setData()函数不可操作的，而且还夹杂了很多其他的不相关参数，所以方法一并不实用。

方法二：

这里我们只是将JSON的数据结构转换为 setData()可操作的数据结构。
思路：其中str为一串Json数据（就是字符串），首先将 Json字符串转换为 Json对象，但由于该Json对象的数据结构与 setData()可操作数组的数据结构不一致，所以要转换一下结构；转换结构后直接将其传给 setData()即可。
效果图如下：
这里写图片描述

源代码如下

<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-data.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>简单数据附加</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.3&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //创建地图
        var map = new AMap.Map('container', {
            zoom: 4
        });

        AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

            if (!PathSimplifier.supportCanvas) {
                alert('当前环境不支持 Canvas！');
                return;
            }

            var pathSimplifierIns = new PathSimplifier({
                zIndex: 100,
                //autoSetFitView:false,
                map: map, //所属的地图实例

                getPath: function(pathData, pathIndex) {

                    return pathData.path;
                },
                getHoverTitle: function(pathData, pathIndex, pointIndex) {

                    if (pointIndex >= 0) {
                          //point 
                        return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                    }

                    return pathData.name + '，点数量' + pathData.path.length;
                },
                renderOptions: {

                    renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
                }
            });

            window.pathSimplifierIns = pathSimplifierIns;
            /****************************开始： 用Json数据动态绘制多个路径 ****************************/
             /*封装：Json字符串 转换为 Json对象*/
            var tranObj = function(str){
                return JSON.parse(str);
            }

            /*封装：构造setData（）可用数组*/
            var seltArr = function(obj){
                var arr = []; 
                for(var i=0;i<obj.length;i++){
                    arr.push({
                                name:obj[i].name,
                                path:[[obj[i].flng,obj[i].flat],[obj[i].tlng,obj[i].tlat]]
                            });
                }
                return arr;
            }

            /*str为Json数据： 
                flng（出发地经度）、flat（出发地纬度）
                tlng（目的地经度）、tlat（目的地纬度）
                name：路径名称
                missTimes：为其他数据，忽略*/

            var str = '[{ "name": "A->B","missTimes": "1", "flng": 116.856275, "flat": 39.874345, "tlng": 116.856245,"tlat": 39.87207},{ "name": "A->B","missTimes": "1", "flng": 116.857275, "flat": 39.876345, "tlng": 116.856345,"tlat": 39.87107},{"name": "C->D","missTimes": "2", "flng": 116.856575, "flat": 39.874345, "tlng": 116.856245,"tlat": 39.87507}]';

            /*Json字符串 转换为 Json对象*/
            var obj = tranObj(str); 

            /*构造setData()可用数组*/
            var myArr = seltArr(obj); 

            /*将可用数组传给 setData()绘制路线*/
            pathSimplifierIns.setData(myArr);
        /****************************  结束 ****************************/
            pathSimplifierIns.on('pointClick', function(e, info) {

                console.log('Click: ' + info.pathData.points[info.pointIndex].name);
            });
            /*开个巡航器*/
             var navg1 = pathSimplifierIns.createPathNavigator(0, {
                loop: true, //循环播放
                speed: 100 //巡航速度，单位千米/小时
            });

            navg1.start();
        });
    </script>
</body>

</html>

看不懂上面代码的查看官方文档即可，
PathSimplifier（轨迹展示）:点击这里查看官方相关文档

白小宇

关注

9
点赞
踩
80

收藏

觉得还不错? 一键收藏
5
评论
高德地图动态绘制多个路线轨迹

最近在用高德地图的API，顺便记录下。平时我们只是通过如下代码，给path一串经纬度数组，静态绘制修改路径，但怎么才能通过接收数据（例如Json数据）来动态绘制多个路径呢？这里有两种方法。//设置数据 pathSimplifierIns.setData([{ name: '路线0', path: [ [116.405289, 39.9049
复制链接

扫一扫