使用 google api 地址更新 jQuery jqgrid 列

Update jQuery jqgrid column with google api address

本文关键字：jQuery jqgrid 更新 地址 google api 使用      更新时间：2023-09-26

我正在尝试从谷歌地图 API 获取地址，并在没有值时在表格的右列中显示此地址。当他们在代码中定义了自定义地址时，会显示此地址，但是当它需要显示来自谷歌地图 API 的地址时，它不会显示。我需要更改什么才能显示这些内容？

var oTable = $("#example").dataTable({
  "aoColumns": [{
    "sTitle": "Time"
  }, {
    "sTitle": "Lat"
  }, {
    "sTitle": "Long"
  }, {
    "sTitle": "Addr"
  }]
});
var p = [
        ["10:00:00", "78.8807865", "17.8921649", "got Address"]
];
for (var j = 0; j < 400; j++) {
p.push(["10:00:"+j, "78.4807865", "17.4921649", ""]);
}
alert(p.length);
oTable.fnAddData(p);
for (var i = 0; i < p.length; i++) {
  if (p[i][3] == "") {
    var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(p[i][1], p[i][2]);
    function getAddr(i){
  geocoder.geocode({
    "latLng": latlng
  }, function(results, status) {
    var address;
    if (status == 'OVER_QUERY_LIMIT') {
      address = 'Loading...';
      setTimeout(function(){ getAddr(i); }, 1000);
    } else if (status == 'OK') {
      address = results[0].formatted_address;
    } else {
      address = 'Error: ' + status;
    }
    p[i][3] = address;
    oTable.fnUpdate(p[i], i);
  });
}
getAddr(i);}
}
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<table id="example"></table>

更新的代码

  • 有了这个更新的代码浏览器没有响应，浏览器被击中了。
    • 任何建议，然后调用
  • 客户端谷歌地图API避免浏览器无响应和浏览器罢工（如果需要更多的时间不是问题，需要解决方案而不打击浏览器），
  • 提前谢谢。

调用回调时，循环已经完成，因此循环变量 i 在数组p之外。

您可以使用函数表达式创建一个作用域，在该作用域中，变量的副本i一直存在，直到数据到达：

var oTable = $("#example").dataTable({
  "aoColumns": [{
    "sTitle": "Time"
  }, {
    "sTitle": "Lat"
  }, {
    "sTitle": "Long"
  }, {
    "sTitle": "Addr"
  }]
});
var p = [
  ["10:00:00", "17.4807865", "78.4921649", ""],
  ["10:00:01", "17.5807865", "78.5921649", ""],
  ["10:00:02", "17.6807865", "78.6921649", "Somthing address"],
  ["10:00:03", "17.7807865", "78.7921649", ""],
  ["10:00:04", "17.8807865", "78.8921649", "got Address"],
  ["10:00:05", "17.4807865", "78.4921649", ""],
  ["10:00:06", "17.5807865", "78.5921649", ""],
  ["10:00:07", "17.6807865", "78.6921649", "Somthing address"],
  ["10:00:08", "17.7807865", "78.7921649", ""],
  ["10:00:09", "17.8807865", "78.8921649", "got Address"],
  ["10:00:10", "17.4807865", "78.4921649", ""],
  ["10:00:11", "17.5807865", "78.5921649", ""],
  ["10:00:12", "17.6807865", "78.6921649", "Somthing address"],
  ["10:00:13", "17.7807865", "78.7921649", ""],
  ["10:00:14", "17.8807865", "78.8921649", "got Address"],
  ["10:00:15", "17.4807865", "78.4921649", ""],
  ["10:00:16", "17.5807865", "78.5921649", ""],
  ["10:00:17", "17.6807865", "78.6921649", "Somthing address"],
  ["10:00:18", "17.7807865", "78.7921649", ""],
  ["10:00:19", "17.8807865", "78.8921649", "got Address"],
  ["10:00:19", "17.8807865", "78.8921649", "got Address"],
];
oTable.fnAddData(p);
for (var i = 0; i < p.length; i++) {
  if (p[i][3] == "") {
    var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(p[i][1], p[i][2]);
    
    (function(i){
    
      geocoder.geocode({
        "latLng": latlng
      }, function(results, status) {
        var address;
        if (status == 'OK') {
          address = results[0].formatted_address;
        } else {
          address = 'Error: ' + status;
        }
        p[i][3] = address;
        oTable.fnUpdate(p[i], i);
      });
    })(i);
    
  }
}
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<table id="example"></table>

若要使用超时来规避查询限制，如下所示：

    function getAddr(i){
      geocoder.geocode({
        "latLng": latlng
      }, function(results, status) {
        var address;
        if (status == 'OVER_QUERY_LIMIT') {
          address = 'Loading...';
          setTimeout(function(){ getAddr(i); }, 1500);
        } else if (status == 'OK') {
          address = results[0].formatted_address;
        } else {
          address = 'Error: ' + status;
        }
        p[i][3] = address;
        oTable.fnUpdate(p[i], i);
      });
    }
    getAddr(i);

  • 试试这个代码。

    oTable.fnUpdate(p[i],i);

为什么不使用反向地理编码服务在数据源服务器端进行管理？ 您可能会很快达到Google的查询API限制，除非您将其与地图显示相结合，否则我很确定它违反了TOS。

有许多免费和付费服务可用。 您还可以下载数据集并滚动自己的数据集。

  • https://geoservices.tamu.edu/Services/ReverseGeocoding/
相关文章：