データを表示しているjqueryデータテーブルがあります（以下を参照）。最後の列はアドレスで、行データは単純にロード中と表示されていることがわかります。
データの経度と緯度を使用して、Google Maps API から住所を取得したいと考えています。
住所の取得に時間がかかることはわかっていますが、3000 件の結果が返された場合は時間がかかるため、事前にジオコーディングされた住所をデータに渡さなかったのです。
テーブル データが表示されたら、各行の緯度/経度のジオコーディングを開始し、各行が完了するたびに住所列を更新できますか?
Google マップ用の 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
});
アップデート
ほぼ完了しました:)クラスが緯度、経度、住所に追加され、ジオコーディングされた住所がコンソールに表示されます。私がする必要があるのは、テーブルの正しい行にアドレスを取得することだけです。どうすればいいですか？
私のコード 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
});
});
}
これで、データは本当に更新されました。