1. //ajax解析的json
    {
  2.     "status": 1,
  3.     "content": {
  4.         "pathsInfo": [
  5.             {
  6.                 "id": 1055,
  7.                 "stoplineLat": 39.073574,
  8.                 "beginpiontLon": 117.091149,
  9.                 "roadBh": null,
  10.                 "onroadName": "海泰南道",
  11.                 "stoplineLon": 117.096723,
  12.                 "beginpiontLat": 39.073537,
  13.                 "createDate": "2018-04-17T18:09:10",
  14.                 "piontGroup": "117.091156:39.073532,117.092285:39.073532,117.095398:39.073536,117.096649:39.073536",
  15.                 "tpCrossroadInfo": {
  16.                     "id": 1309,
  17.                     "cityCode": "022",
  18.                     "crossroadType": 0,
  19.                     "stoplineNum": 0,
  20.                     "stateCode": 1,
  21.                     "crssroadName": "海泰南道,海泰发展二路",
  22.                     "createDate": "2018-04-12T18:37:40",
  23.                     "centerpointLat": 39.073574,
  24.                     "centerpointLon": 117.096723
  25.                 }
  26.             },
  27.             {
  28.                 "id": 1318,
  29.                 "stoplineLat": 39.073574,
  30.                 "beginpiontLon": 117.096708,
  31.                 "roadBh": null,
  32.                 "onroadName": "海泰发展二路",
  33.                 "stoplineLon": 117.096723,
  34.                 "beginpiontLat": 39.077368,
  35.                 "createDate": "2018-04-19T16:24:12",
  36.                 "piontGroup": "117.096718:39.077366,117.096718:39.076599,117.09671:39.076092,117.09671:39.075436,117.096703:39.074348,117.096695:39.073627",
  37.                 "tpCrossroadInfo": {
  38.                     "id": 1309,
  39.                     "cityCode": "022",
  40.                     "crossroadType": 0,
  41.                     "stoplineNum": 0,
  42.                     "stateCode": 1,
  43.                     "crssroadName": "海泰南道,海泰发展二路",
  44.                     "createDate": "2018-04-12T18:37:40",
  45.                     "centerpointLat": 39.073574,
  46.                     "centerpointLon": 117.096723
  47.                 }
  48.             },
  49.             {
  50.                 "id": 1319,
  51.                 "stoplineLat": 39.073574,
  52.                 "beginpiontLon": 117.103589,
  53.                 "roadBh": null,
  54.                 "onroadName": "海泰南道",
  55.                 "stoplineLon": 117.096723,
  56.                 "beginpiontLat": 39.073689,
  57.                 "createDate": "2018-04-19T16:24:27",
  58.                 "piontGroup": "117.103584:39.073692,117.101616:39.073681,117.100128:39.073666,117.096741:39.073627",
  59.                 "tpCrossroadInfo": {
  60.                     "id": 1309,
  61.                     "cityCode": "022",
  62.                     "crossroadType": 0,
  63.                     "stoplineNum": 0,
  64.                     "stateCode": 1,
  65.                     "crssroadName": "海泰南道,海泰发展二路",
  66.                     "createDate": "2018-04-12T18:37:40",
  67.                     "centerpointLat": 39.073574,
  68.                     "centerpointLon": 117.096723
  69.                 }
  70.             },
  71.             {
  72.                 "id": 1320,
  73.                 "stoplineLat": 39.073574,
  74.                 "beginpiontLon": 117.096837,
  75.                 "roadBh": null,
  76.                 "onroadName": "",
  77.                 "stoplineLon": 117.096723,
  78.                 "beginpiontLat": 39.067214,
  79.                 "createDate": "2018-04-19T16:24:38",
  80.                 "piontGroup": "117.096863:39.067215,117.096863:39.067383,117.096848:39.069035,117.096825:39.070984,117.096825:39.071037,117.096817:39.071354,117.096809:39.071671,117.096809:39.072071,117.096794:39.073536",
  81.                 "tpCrossroadInfo": {
  82.                     "id": 1309,
  83.                     "cityCode": "022",
  84.                     "crossroadType": 0,
  85.                     "stoplineNum": 0,
  86.                     "stateCode": 1,
  87.                     "crssroadName": "海泰南道,海泰发展二路",
  88.                     "createDate": "2018-04-12T18:37:40",
  89.                     "centerpointLat": 39.073574,
  90.                     "centerpointLon": 117.096723
  91.                 }
  92.             }
  93.         ]
  94.     }
  95. }

获取到id和piontGroup自己拼装

  1. $.ajax({
  2.         url : '/trajectory/findByCrossId',
  3.         type : 'POST',
  4.         data : {
  5.             CrossId : clickCrossRoadId
  6.         },
  7.         dataType : 'json',
  8.  
  9.         success : function(data) {
  10.             if (data.status == 1) {
  11.                 var len = data.content.pathsInfo.length;
  12.                 var pointsInfo = data.content.pathsInfo;
  13.                     var arr = new Array();
  14.                     var pointArr = new Array();
  15.                     var str,strs;
  16.                     for(var k=0; k<len; k++){
  17.                         pointArr = [];
  18.                         var obj = {};
  19.                         strs = pointsInfo[k].piontGroup.split(',');
  20.                         for(var i=0; i<strs.length; i++){
  21.                             str = [JSON.parse(strs[i].split(':')[0]),JSON.parse(strs[i].split(':')[1])];
  22.                             pointArr.push(str);
  23.                         }
  24.  
  25.                         obj.nameId = pointsInfo[k].id;
  26.                         obj.path = pointArr;
  27.  
  28.                         arr.push(obj);
  29.  
  30.                 }

在高德显示轨迹

  1. <!-- 重点参数：renderOptions -->
  2. <!doctype html>
  3. <html lang="zh-CN">
  4.  
  5. <head>
  6.     <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/adjust-style.html -->
  7.     <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
  8.     <meta charset="utf-8">
  9.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  10.     <title>调整线、点样式</title>
  11.     <style>
  12.     html,
  13.     body {
  14.         width: 100%;
  15.         height: 100%;
  16.         margin: 0px;
  17.     }
  18.  
  19.     #outer-box {
  20.         height: 100%;
  21.  
  22.     }
  23.  
  24.     #container {
  25.         height: 100%;
  26.         width: 100%;
  27.     }
  28.  
  29.     .hide {
  30.         display: none;
  31.     }
  32.  
  33.     </style>
  34. </head>
  35.  
  36. <body>
  37.     <div id="outer-box">
  38.         <div id="container">
  39.         </div>
  40.  
  41.     </div>
  42.     <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.5&key=ae37cf587f29134e49985c880a7228ae&plugin=AMap.Driving'></script>
  43.     <script src="../../../../plug/ext/dat.gui.min.js?v=1.0.11"></script>
  44.     <!-- UI组件库 1.0 -->
  45.     <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  46.     <script type="text/javascript">
  47.     //创建地图
  48.     var map = new AMap.Map('container', {
  49.         zoom: 13
  50.     });
  51.  
  52.     AMapUI.load(['ui/misc/PathSimplifier', 'lib/$', 'lib/utils'], function(PathSimplifier, $, utils) {
  53.  
  54.         if (!PathSimplifier.supportCanvas) {
  55.             alert('当前环境不支持 Canvas！');
  56.             return;
  57.         }
  58.  
  59.         var defaultRenderOptions = {
  60.             renderAllPointsIfNumberBelow: -1,
  61.             pathTolerance: 2,
  62.             keyPointTolerance: 0,
  63.             pathLineStyle: {
  64.                 lineWidth: 4,
  65.                 strokeStyle: '#C11534',
  66.                 borderWidth: 1,
  67.                 borderStyle: '#cccccc',
  68.                 dirArrowStyle: true
  69.             },
  70.             pathLineHoverStyle: {
  71.                 lineWidth: 4,
  72.                 strokeStyle: 'rgba(204, 63, 88,1)',
  73.                 borderWidth: 1,
  74.                 borderStyle: '#cccccc',
  75.                 dirArrowStyle: true
  76.             }
  77.         };
  78.  
  79.         var pathSimplifierIns = new PathSimplifier({
  80.  
  81.             zIndex: 100,
  82.  
  83.             map: map,
  84.  
  85.             getPath: function(pathData, pathIndex) {
  86.  
  87.                 return pathData.path;
  88.             },
  89.             getHoverTitle: function(pathData, pathIndex, pointIndex) {
  90.  
  91.                 if (pointIndex >= 0) {
  92.                     //point
  93.                     return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
  94.                 }
  95.  
  96.                 return pathData.name + '，点数量' + pathData.path.length;
  97.             },
  98.             renderOptions: defaultRenderOptions
  99.         });
  100.  
  101.         window.pathSimplifierIns = pathSimplifierIns;
  102.         var jsonObj = [{"name":1072,"path":[[117.070396,39.088734],[117.070389,39.088299],[117.070419,39.08532],[117.070435,39.084965],[117.070526,39.084377],[117.070694,39.083584],[117.070946,39.082802],[117.071281,39.082077],[117.071457,39.08176],[117.071732,39.08131],[117.071915,39.08107],[117.072189,39.08073],[117.072594,39.080257],[117.072914,39.079926],[117.073196,39.079655],[117.074005,39.078991],[117.074532,39.078636],[117.074936,39.078392],[117.074966,39.078369],[117.075325,39.078163],[117.075867,39.077885],[117.076569,39.077557],[117.076851,39.077377],[117.077003,39.077236],[117.077049,39.077126],[117.077065,39.077042],[117.077057,39.075539],[117.077103,39.073601]]},{"name":1073,"path":[[117.065384,39.07346],[117.066666,39.073486],[117.068321,39.073486],[117.069626,39.07349],[117.070312,39.07349],[117.070747,39.07349],[117.072044,39.073494],[117.072815,39.073494],[117.075508,39.073502],[117.076248,39.073505],[117.076569,39.073505],[117.077164,39.073505]]},{"name":1074,"path":[[117.077248,39.072186],[117.077179,39.072395],[117.077179,39.072937],[117.077171,39.073505]]},{"name":1075,"path":[[117.090767,39.073624],[117.088593,39.073616],[117.084396,39.073608],[117.082283,39.073605],[117.082039,39.073605],[117.079918,39.073601],[117.079308,39.073601],[117.078094,39.073601],[117.077225,39.073597]]}]
  103.  
  104.        // $.getJSON(jsonObj, function(d) {
  105.  
  106.             pathSimplifierIns.setData(jsonObj);
  107.  
  108.             //pathSimplifierIns.setSelectedPathIndex();
  109.  
  110.         //});
  111.  
  112.     });
  113.  
  114.     </script>
  115. </body>
  116.  
  117. </html>

解析的数据放进table

  1. //动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格
  2. function createShowingTable(data){
  3.    var len = data.content.pathsInfo.length;
  4.    var pointsInfo = data.content.pathsInfo;
  5.    //此处需要让其动态的生成一个table并填充数据
  6.    var tableStr = "<div id='seePointTable'><button type='button' class='close' onclick='Iclose1()' title='close it'>&times;</button><table>";
  7.    tableStr = tableStr + "<thead><td>ID</td><td>所属路口</td><td>起点坐标</td><td>操作</td></thead>";
  8.    for(var i=0 ;i<len ; i++){
  9.        tableStr = tableStr + "<tr><td>"+ pointsInfo[i].id +"</td>"+"<td>"+pointsInfo[i].tpCrossroadInfo.crssroadName + "</td>"+"<td>"+pointsInfo[i].beginpiontLon+","+pointsInfo[i].beginpiontLat +"</td>"+"<td><a href='javascript:deletePointPath("+pointsInfo[i].id+")'>"+"删除"+"</a></td></tr>";
  10.    }
  11.    tableStr = tableStr + "</table></div>";
  12.    //将动态生成的table添加的事先隐藏的div中.
  13.    $("#dataTable").html(tableStr);
  14. }

遇到一个错误：

window.pathSimplifierIns = pathSimplifierIns;

pathSimplifierIns.setData(arr);//这里要求传的是一个json对象
//pathSimplifierIns.setData(JSON.stringify(arr))；//最开始我是这么传的，一直不出路径，后来鑫哥告诉我，arr本身就是对象，JSON.stringify(arr)这样就是字符串了，所以出不来路径。
console.log(JSON.stringify(arr));//我一直从这看结果，以为是一个对象，其实是字符串,只是没显示出“”才让我一直以为是个对象，注意：如果是对象console.log会显示Object[...........]

使用js接收ajax解析的json再拼成一个自己想要的json的更多相关文章

  1. 原生js 以ajax（post）的方式传json至php，并让php解析为数组

    如题. 比如要把一个json,如 json= {name:"John Rambo", time:"3pm"},,通过js ,传到一个php服务器 fwq.php ...

  2. js中eval详解，用Js的eval解析JSON中的注意点

    先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...

  3. 原生js实现ajax与jquery的ajax库，及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  4. 问题集录--JS如何处理和解析Json数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

  5. 使用ajax解析后台json数据时：Unexpected token o in JSON at position 1

    json数据解析异常 今天在做json数据的时候,出现了如下错误,说是解析异常. VM1584:1 Uncaught SyntaxError: Unexpected token o in JSON a ...

  6. @RequestBody接收ajax的json字符串

    在使用ajax进行请求,并传递参数时,偶尔需要把数组作为传递参数,这是就要使用@RequestBody来解决这个问题 在页面端的处理: (1)利用JSON.stringify(arr)需要把json对 ...

  7. 用Js的eval解析JSON中的注意点

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...

  8. ASP.NET MVC Controller接收ajax post方式发送过来的json对象或数组数据

    本例旨在说明我的一种Controller接收ajax提交(POST)过来的json对象或数组信息的方式,感觉应该有更好的方式,欢迎提出宝贵意见. JSON.stringify(jsonObj)不支持I ...

  9. spring mvc接收ajax提交的JSON数据，并反序列化为对象

    需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; ...

随机推荐

  1. JSON 转 VO

    需求 将获取的json数据直接转为vo 解决 利用net.sf.json.JSONObject的toBean() 确保json中的key值和vo中的字段名称一致 JSONObject jsonObje ...

  2. javaweb带父标签的自定义标签

    1.完整的示例代码:要实现的功能是父标签中有name属性,子标签将父标签的name属性值打印到jsp页面上. 1.1 父类和子类的标签处理器类 testParentTag.java package c ...

  3. IOC和DI到底是什么？

     在学习Spring框架的时候,我们总是能见到IOC这个单词,也时常听到DI这个词,那么他们分别是什么意思呢?接下来就讲讲个人对于这两个概念的理解  一.IOC和DI概念 IOC(控制反转):全称为: ...

  4. flask 继承模版的基本使用

  5. 01.php面向对象

    下面是php_oop的一些基本知识 <?php //echo "<meta charset='utf-8'>" //设置中文输出 //1.面向对象类的建立: cl ...

  6. go的编译与重启

    ps -ef|grep pro-name| grep -v grep|awk '{print $2}'|xargs kill -9 > /dev/null go build nohup ./xe ...

  7. C++类继承--继承后函数的值

    类的继承会首先寻找基类,若基类未实现,则会寻找派生类的函数 1. class继承,函数不继承 #include <stdio.h> class Base { public: Base(){ ...

  8. hdu 1162 Eddy's picture （Kruskal 算法）

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 Eddy's picture Time Limit: 2000/1000 MS (Java/Ot ...

  9. 创建线程后马上CloseHandle(threadhandle)起什么作用

    原文:http://www.cnblogs.com/eddyshn/archive/2010/04/14/1711674.html HANDLE threadhandle = CreateThread ...

  10. 目前比较全的CSS重设(reset)方法总结（转）

    原文地址 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈 ...