zoukankan      html  css  js  c++  java
  • 使用js接收ajax解析的json再拼成一个自己想要的json

    //ajax解析的json
    {
    "status": 1, "content": { "pathsInfo": [ { "id": 1055, "stoplineLat": 39.073574, "beginpiontLon": 117.091149, "roadBh": null, "onroadName": "海泰南道", "stoplineLon": 117.096723, "beginpiontLat": 39.073537, "createDate": "2018-04-17T18:09:10", "piontGroup": "117.091156:39.073532,117.092285:39.073532,117.095398:39.073536,117.096649:39.073536", "tpCrossroadInfo": { "id": 1309, "cityCode": "022", "crossroadType": 0, "stoplineNum": 0, "stateCode": 1, "crssroadName": "海泰南道,海泰发展二路", "createDate": "2018-04-12T18:37:40", "centerpointLat": 39.073574, "centerpointLon": 117.096723 } }, { "id": 1318, "stoplineLat": 39.073574, "beginpiontLon": 117.096708, "roadBh": null, "onroadName": "海泰发展二路", "stoplineLon": 117.096723, "beginpiontLat": 39.077368, "createDate": "2018-04-19T16:24:12", "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", "tpCrossroadInfo": { "id": 1309, "cityCode": "022", "crossroadType": 0, "stoplineNum": 0, "stateCode": 1, "crssroadName": "海泰南道,海泰发展二路", "createDate": "2018-04-12T18:37:40", "centerpointLat": 39.073574, "centerpointLon": 117.096723 } }, { "id": 1319, "stoplineLat": 39.073574, "beginpiontLon": 117.103589, "roadBh": null, "onroadName": "海泰南道", "stoplineLon": 117.096723, "beginpiontLat": 39.073689, "createDate": "2018-04-19T16:24:27", "piontGroup": "117.103584:39.073692,117.101616:39.073681,117.100128:39.073666,117.096741:39.073627", "tpCrossroadInfo": { "id": 1309, "cityCode": "022", "crossroadType": 0, "stoplineNum": 0, "stateCode": 1, "crssroadName": "海泰南道,海泰发展二路", "createDate": "2018-04-12T18:37:40", "centerpointLat": 39.073574, "centerpointLon": 117.096723 } }, { "id": 1320, "stoplineLat": 39.073574, "beginpiontLon": 117.096837, "roadBh": null, "onroadName": "", "stoplineLon": 117.096723, "beginpiontLat": 39.067214, "createDate": "2018-04-19T16:24:38", "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", "tpCrossroadInfo": { "id": 1309, "cityCode": "022", "crossroadType": 0, "stoplineNum": 0, "stateCode": 1, "crssroadName": "海泰南道,海泰发展二路", "createDate": "2018-04-12T18:37:40", "centerpointLat": 39.073574, "centerpointLon": 117.096723 } } ] } }

    获取到id和piontGroup自己拼装

    $.ajax({
            url : '/trajectory/findByCrossId',
            type : 'POST',
            data : {
                CrossId : clickCrossRoadId
            },
            dataType : 'json',
    
            success : function(data) {
                if (data.status == 1) {
                    var len = data.content.pathsInfo.length;
                    var pointsInfo = data.content.pathsInfo;
                        var arr = new Array();  
                        var pointArr = new Array();  
                        var str,strs;
                        for(var k=0; k<len; k++){
                            pointArr = [];
                            var obj = {};
                            strs = pointsInfo[k].piontGroup.split(',');
                            for(var i=0; i<strs.length; i++){
                                str = [JSON.parse(strs[i].split(':')[0]),JSON.parse(strs[i].split(':')[1])];
                                pointArr.push(str);
                            }
                            
                            obj.nameId = pointsInfo[k].id;
                            obj.path = pointArr;
                            
                            arr.push(obj);
                            
                            
                        
                    }

    在高德显示轨迹

    <!-- 重点参数:renderOptions -->
    <!doctype html>
    <html lang="zh-CN">
    
    <head>
        <!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/adjust-style.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 {
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        
        #outer-box {
            height: 100%;
            
        }
        
        #container {
            height: 100%;
            width: 100%;
        }
        
        
        .hide {
            display: none;
        }
        
        </style>
    </head>
    
    <body>
        <div id="outer-box">
            <div id="container">
            </div>
    
        </div>
        <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.5&key=ae37cf587f29134e49985c880a7228ae&plugin=AMap.Driving'></script>
        <script src="../../../../plug/ext/dat.gui.min.js?v=1.0.11"></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: 13
        });
    
        AMapUI.load(['ui/misc/PathSimplifier', 'lib/$', 'lib/utils'], function(PathSimplifier, $, utils) {
    
            if (!PathSimplifier.supportCanvas) {
                alert('当前环境不支持 Canvas!');
                return;
            }
    
            var defaultRenderOptions = {
                renderAllPointsIfNumberBelow: -1,
                pathTolerance: 2,
                keyPointTolerance: 0,
                pathLineStyle: {
                    lineWidth: 4,
                    strokeStyle: '#C11534',
                    borderWidth: 1,
                    borderStyle: '#cccccc',
                    dirArrowStyle: true
                },
                pathLineHoverStyle: {
                    lineWidth: 4,
                    strokeStyle: 'rgba(204, 63, 88,1)',
                    borderWidth: 1,
                    borderStyle: '#cccccc',
                    dirArrowStyle: true
                }
            };
    
            var pathSimplifierIns = new PathSimplifier({
    
                zIndex: 100,
    
                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: defaultRenderOptions
            });
    
            window.pathSimplifierIns = pathSimplifierIns;
            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]]}]
    
           // $.getJSON(jsonObj, function(d) {
    
    
                pathSimplifierIns.setData(jsonObj);
    
                //pathSimplifierIns.setSelectedPathIndex();
    
            //});
    
    
        });
        
        
        </script>
    </body>
    
    </html>

     解析的数据放进table

    //动态的创建一个table,同时将后台获取的数据动态的填充到相应的单元格  
    function createShowingTable(data){
       var len = data.content.pathsInfo.length;
       var pointsInfo = data.content.pathsInfo;
       //此处需要让其动态的生成一个table并填充数据  
       var tableStr = "<div id='seePointTable'><button type='button' class='close' onclick='Iclose1()' title='close it'>&times;</button><table>";  
       tableStr = tableStr + "<thead><td>ID</td><td>所属路口</td><td>起点坐标</td><td>操作</td></thead>";   
       for(var i=0 ;i<len ; i++){  
           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>";  
       }  
       tableStr = tableStr + "</table></div>";  
       //将动态生成的table添加的事先隐藏的div中.  
       $("#dataTable").html(tableStr);       
    } 

     遇到一个错误:

    window.pathSimplifierIns = pathSimplifierIns;

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

  • 相关阅读:
    Android
    列出控制原理来解决
    【ORACLE】spfile失落的处理
    Cocos2d-x 脚本语言Lua基本语法
    远东转载这说明一些有实力的话人工智能协会的思维和潜意识之间移动的一篇文章
    日志框架的实时变化,即日起,思维详细框架(4)
    [Python] Scatter Plot for daily return
    [Python] Use a Python Generator to Crawl the Star Wars API
    [Poi] Setup PostCSS and Tailwind with Poi
    [Poi] Build and Analyze Your JavaScript Bundles with Poi
  • 原文地址:https://www.cnblogs.com/yunqing/p/8891109.html
Copyright © 2011-2022 走看看