1

我有一个显示我的数据的 jquery 数据表（见下文）。您会注意到最后一列是地址，而行数据只是表示正在加载。

桌子

我想使用数据中的经度和纬度从谷歌地图 api 获取地址。

我知道获取地址可能需要一些时间，如果返回 3000 个结果将需要很长时间，这就是为什么我没有通过数据中的预地理编码地址。

显示表格数据后，我可以开始对每一行的纬度/经度进行地理编码，并在每一行完成时更新地址列吗？

我也在使用谷歌地图的 GMAP3 jQuery 插件，所以我可以得到这样的地址：

        // get address
        $("#map").gmap3({
          action: 'getAddress',
          latLng: [lati, longi],
          callback: function (results) {
            content = results && results[1] ? results && results[1].formatted_address : 'No Address';
          } // end callback

        });

更新

几乎完成了 :) 这些类被添加到 lat、long 和地址 ok，我正在将地理编码地址接收到控制台中。我需要做的就是将地址放入表中的正确行。我将如何做到这一点？

我的代码 var historyArray = window.opener.historyArray;

 $(document).ready(function() {
            //$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="report"></table>' );
            $('#report').dataTable( {
                "aaData": historyArray,
                "aoColumns": [
                    { "mDataProp": "User" },
                    { "mDataProp": "Timestamp" },
                    { "mDataProp": "Latitude" },
                    { "mDataProp": "Longitude" },
                    { "mDataProp": "Address" }
                ],
                "iDisplayLength": 25,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "sDom": '<"H"Tfr>t<"F"ip>',
                "oTableTools": {
                            "sSwfPath": "swf/copy_csv_xls_pdf.swf",
                            "aButtons": ["copy", "csv", "xls", "pdf"]
                                      },
                "fnInitComplete": function () {
                    getAdresses();
                }
            } );    

$("#report td:nth-child(3)").addClass("lat");
$("#report td:nth-child(4)").addClass("lng");
$("#report td:nth-child(5)").addClass("addi");
} );

 function getAdresses() {
   $.each(historyArray, function (index,data) {
    // get address
    var map = window.opener.document.getElementById('dispatcher');
    $(map).gmap3({
      action: 'getAddress',
      latLng: [data.Latitude, data.Longitude],
      callback: function (results) {
        content = results && results[1] ? results && results[1].formatted_address : 'No Address';
        console.log(content);
      } // end callback

    });
   });
 }

更新 2

嗨，更新的代码。因为我添加了 $(this).html(content); 在 gmap3 的回调中，它没有更新“addi”单元格，我该如何解决？

 function getAdresses() {
   $(".addi").each(function () {
     var lat = $(this).siblings(".lat").html().toString();
     var lng = $(this).siblings(".lng").html().toString();
      // get address
      $(map).gmap3({
        action: 'getAddress',
        latLng: [lat, lng],
        callback: function (results) {
          content = results && results[1] ? results && results[1].formatted_address : 'No Address';
          $(this).html(content);
        } // end callback

      });
   });
 }

最终更新 添加到善意给出的解决方案。我发现当我将数据导出到 CSV、Excel 等时，地址数据没有更新。

我将代码修改为此。

       myTable = $('#report').dataTable({
     "aaData": historyArray,
     "aoColumns": [{
       "mDataProp": "User"
     }, {
       "mDataProp": "Timestamp"
     }, {
       "mDataProp": "Latitude"
     }, {
       "mDataProp": "Longitude"
     }, {
       "mDataProp": "Address"
     }],
     "bPaginate": false,
     "bJQueryUI": true,
     "sPaginationType": "full_numbers",
     "sDom": '<"H"Tfr>t<"F"ip>',
     "oTableTools": {
       "sSwfPath": "swf/copy_csv_xls_pdf.swf",
       "aButtons": ["copy", "csv", "xls", "pdf"]
     },
     "fnInitComplete": function () {
       addClasses();
     }
   });
   window.setTimeout(function () {
     getAdresses();
   }, 1000);
 });

 function addClasses() {
   $("#report td:nth-child(3)").addClass("lat");
   $("#report td:nth-child(4)").addClass("lng");
   $("#report td:nth-child(5)").addClass("addi");
 }

 function getAdresses() {
   $(".addi").each(function () {
     var lat = $(this).siblings(".lat").html().toString();
     var lng = $(this).siblings(".lng").html().toString();
     var addi = $(this);
     $(addi).html("Reverse geocoding..");
     var aPos = myTable.fnGetPosition(this);

     // get address
     $('#hidden').gmap3({
       action: 'getAddress',
       latLng: [lat, lng],
       callback: function (results) {
         content = results && results[1] ? results && results[1].formatted_address : 'No Address';
         myTable.fnUpdate(content, aPos[0], 4);
       } // end callback

     });
   });
 }

现在数据真正更新了。

4

1 回答 1

1

如果我理解正确：

您可以通过 jQuery 向最后一列添加一个类，如下所示：

$("#table td:nth-child(5)").addClass("someClass");

然后您可以创建一个在表初始化后运行的函数：

//Part of the datatable initialization
"fnInitComplete": function () {
    myAwesomeFunction();
}

在该函数中，您可以.each()基于类执行并获取兄弟姐妹（纬度和经度）将它们传递给 api 并.html()处理结果以替换加载文本。我希望这是有道理的。如果不让我知道:)

//编辑//

抢兄弟姐妹：先给他们上课

$("#table td:nth-child(3)").addClass("lat");

$("#table td:nth-child(4)").addClass("long");

请记住，您必须在初始化数据表后应用所有这些样式。

那么你就可以：

var lat = $(this).siblings(".lat").html().toString();
var long = $(this).siblings(".long").html().toString();

//////////////编辑2 //////////////

首先移动这段代码：

$("#report td:nth-child(3)").addClass("lat");
$("#report td:nth-child(4)").addClass("lng");
$("#report td:nth-child(5)").addClass("addi");

对于这样的功能：

$("#report").on("draw", function() {
   addClasses();
});

function addClasses() {
    $("#report td:nth-child(3)").addClass("lat");
    $("#report td:nth-child(4)").addClass("lng");
    $("#report td:nth-child(5)").addClass("addi");
}

并将addClasses()功能添加到fnInitcomplete 之前 getAddresses()

这样，如果您更改页面或排序或对表格进行其他更改，则将应用/重新应用这些类。

我不确定地理数据的 API 是如何工作的，但为了抓住长拉特我会做这样的事情：

    $(".addi").each(function () {
        var lat = $(this).siblings(".lat").html().toString();
        var lng = $(this).siblings(".lng").html().toString();
        // Now pass these parameters to the geocode function and store the result in some var
        //In this case lets call it result
        //Now just replace the loading with the result:
        $(this).html(result);
    });

将上面的代码放入getAddresses()函数中，它应该会给你结果。

让我知道这是否足够以及是否可以正常工作；）

于 2012-07-10T17:26:04.813 回答