使用 google api 地址更新 jQuery jqgrid 列答案

【问题标题】：Update jQuery jqgrid column with google api address使用 google api 地址更新 jQuery jqgrid 列
【发布时间】：2015-01-10 07:30:41
【问题描述】：

我正在尝试从 google maps api 获取地址，并在我的表的右列中显示该地址，但此时还没有值。当他们在代码中定义了自定义地址时，会显示此地址，但是当它需要显示来自 google maps 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>

更新代码

使用此更新后的代码BROWSER NOT RESPONDING 和 BROWSER STRUCK。
任何关于调用客户端谷歌地图 api 的建议，避免浏览器不响应和浏览器被击中（如果需要更多时间也不是问题，需要解决方案以解决不影响浏览器的问题），
提前致谢。

【问题讨论】：

稍微偏离主题，但非常基本的 Javascript 范围 - 您声明“var i”两次，但范围意味着它甚至在第一个声明之前就存在于整个块中（第二个是多余的） - stackoverflow.com/a/500459/3328079 - 具体参见第 8 点

标签： javascript jquery google-maps jquery-ui jqgrid

【解决方案1】：

调用回调时，循环已经结束，所以循环变量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);

【讨论】：

@acecloudsmaps：您应该检查响应的状态。 geocode 很可能找不到某些坐标的任何地址。
@acecloudsmaps：您应该检查响应的状态，我在上面添加了代码。您不能一次对那么多坐标进行地理编码。在前五次调用后，您将获得状态 OVER_QUERY_LIMIT。
@acecloudsmaps：这看起来是一种可行的方法，只需使用i 变量作为索引而不是硬编码值。您可以将函数表达式转换为命名函数，这样超时就可以调用该函数。
@acecloudsmaps：您可以使用function getAddr(i) { ... } 语法代替函数表达式。当你调用它时，你应该使用getAddr(i) 而不是getaddr()。还要注意大小写的区别。
稍微偏离主题，但非常基本的 Javascript 范围 - 您声明“var i”两次，但范围意味着它甚至在第一个声明之前就存在于整个块中（第二个是多余的） - stackoverflow.com/a/500459/3328079 - 具体见第 8 点

【解决方案2】：

试试这个代码。

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

【讨论】：

谢谢，如果我没有使用谷歌地图地址，我会更新所有行。我还需要谷歌地图地址。

【解决方案3】：

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

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

https://geoservices.tamu.edu/Services/ReverseGeocoding/

【讨论】：