Question

我使用以下代码从Google Maps Distance Matrix中提取一些里程数据。问题是它恢复为普通的javascript。我设法让它将数据放入一个javascript数组，所以我有：

arrResults[0]
arrResults[1]
arrResults[2]
arrResults[3]

但我现在想在Jquery中使用该数组，但是无法解决如何将其转换为Jquery数组的问题。

    $( document ).ready(function() {
        $( "#submit" ).click(function() {
        $("#my_map").gmap3({
      getdistance:{
        options:{ 
          origins:["pe219px","ng323rj"], 
          destinations:["pe219px","ng323rj"],
          travelMode: google.maps.TravelMode.DRIVING,
          unitSystem: google.maps.UnitSystem.IMPERIAL
        },
        callback: function(results, status){
          var html = "";
          var arrResults = [];
          if (results){
            for (var i = 0; i < results.rows.length; i++){
              var elements = results.rows[i].elements;
              for(var j=0; j<elements.length; j++){
                switch(elements[j].status){
                  case "OK":
                  var sd=$(this).text();  
                    html += parseInt(elements[j].distance.text) + "<br />";
        arrResults.push(elements[j].distance.text); 

                    break;
                  case "NOT_FOUND":
                    html += "The origin and/or destination of this pairing could not be geocoded<br />";
                    break;
                  case "ZERO_RESULTS":
                    html += "No route could be found between the origin and destination.<br />";
                    break;
                }
              }
            } 
          } else {
            html = "error";
          }
          $("#my_map").html( html );
        }
      }
    });
         }); });
    </head>

    <body>
    <div id="my_map"></div>
    <p><a id="submit" href="#">Submit</a></p>

Answer 1

因为你使用的是gmap3插件，所以问题稍微有些问题，但这就是我如何处理这个问题。

首先：编辑（有关详细信息，请参阅编辑）

其次，通过在IIFE的顶部声明它，使arrResults全局可用于您的功能。不要在其他地方重新声明它。

第三，将你的回调逻辑从ajax函数分离到一个新函数中。它使代码更容易阅读。类似于processData()。

第三，一旦AJAX完成并且您的processData函数已完成其运行，请使用jQuery向您的页面添加新的#viewresults按钮。

$('body').append('<input id="viewresults" type="submit" value="View results"/>')

你这样做是因为AJAX是asyncronous。在收集数据之前单击viewresults按钮会导致错误或什么都没有，因此，只有在数据可用时才能使按钮有效（至少对于您的代码而言）。

我在this jsfiddle中提供了这些想法的摘要（未经测试，但应该给你一些线索）。我希望你觉得它很有用。

从javascript数组创建一个Jquery数组

1 个答案: