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

最新推荐文章于 2025-02-26 10:42:47 发布

白小宇

最新推荐文章于 2025-02-26 10:42:47 发布

阅读量4.6w

点赞数 9

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

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

版权

最近在用高德地图的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>

最低0.47元/天解锁文章

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

方法一：

方法二：

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