最近在用高德地图的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（轨迹展示）:点击这里查看 官方相关文档