我有一个显示我的数据的 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
});
});
}
现在数据真正更新了。