javascript - 谷歌地图距离矩阵和融合表

标签 javascript google-maps matrix distance google-fusion-tables

我刚刚设法在 map 上可视化 Google Fusion Table 中的标记。现在我想知道从用户指定的点到表中存储的那些标记的距离。我想为此使用距离矩阵。代码示例来自https://developers.google.com/maps/documentation/javascript/distancematrix对我来说效果很好,但是,我不知道如何将表中的标记定义为距离矩阵函数中的目的地。

如上所述,我现在需要我的变量来调用 Fusion Table 中的标记作为目标,而不是 destA 和 destB。

这是我的变量:

var schools = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: '1mae334i-txYZFixePEiC7lgYYyi4w6qDN87XAyw'    
  },
}); 

这是谷歌文档中的基本代码。

var origin1 = new google.maps.LatLng(55.930385, -3.118425);
var origin2 = "Greenwich, England";
var destinationA = "Stockholm, Sweden";
var destinationB = new google.maps.LatLng(50.087692, 14.421150);

var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
  origins: [origin1, origin2],
  destinations: [destinationA, destinationB],
  travelMode: google.maps.TravelMode.DRIVING,
  avoidHighways: false,
  avoidTolls: false
}, callback);

function callback(response, status) {
}

如果有人能帮助我解决这个问题,我会非常高兴。我想应该有一些非常简单的解决方案,但我就是不明白:/

无论如何,非常感谢您的帮助!

最佳答案

您需要在 FusionTable 中查询其中的位置,并在查询距离矩阵时使用这些位置。由于表中的行数少于 500 行,我可能会使用 google 可视化库,但新的 JSONP API 也应该可以工作。

距离矩阵仅限于 25 个目的地。具有 94 行的表的概念证明,比这多得多就会出现问题(遇到查询限制和配额)

http://www.geocodezip.com/v3_SO_FusionTables_DistanceMatrix.html

获取前 25 个结果的代码:

  // query the table for the destinations
  var queryString ="SELECT 'geometry' FROM "+FT_TableID;
  var queryText = encodeURIComponent(queryString);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
  //set the callback function
  query.send(createDestinations);
}

function createDestinations(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  } 
  FTresponse = response;
  //for more information on the response object, see the documentation
   //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();
  var geoXml = new geoXML3.parser();
  var bounds = new google.maps.LatLngBounds();
  var request=0;
  destinations[0] = [];
  for (var i=0; ((i<numRows) && (i<25)); i++) {
    var kml = FTresponse.getDataTable().getValue(i,0);
    geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>");
    destinations[request].push(geoXml.docs[i].markers[0].getPosition());
    bounds.extend(geoXml.docs[i].markers[0].getPosition());
  }
  map.fitBounds(bounds);
  calculateDistances(0);
}

function calculateDistances(request) {
   service.getDistanceMatrix({
        origins: [origin],
        destinations: destinations[request],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        avoidHighways: false,
        avoidTolls: false
      }, function (response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      var origins = response.originAddresses;
      var destinationAdds = response.destinationAddresses;
      htmlString = '<table border="1">';
      deleteOverlays();
      for (var i = 0; i < origins.length; i++) {
        var results = response.rows[i].elements;
        for (var j = 0; j < results.length; j++) {
          htmlString += '<tr><td>'+destinationAdds[j]+'</td><td>' + results[j].distance.text +'</td></tr>';
        }
      }
    }
    var outputDiv = document.getElementById('outputDiv');
    htmlString += '</table>';
    outputDiv.innerHTML = htmlString;
  });
}

working example that gets the first 25 results

关于javascript - 谷歌地图距离矩阵和融合表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11619791/

相关文章:

tensorflow 对称矩阵

c++ - 在glm中重用矩阵?

javascript - Javascript 是否有办法执行 "find_if"或 "FirstOrDefault"?

javascript - 单击底部并返回原始位置时动画 div

javascript - 如何打印3个项目,与2个输入(价格和数量)相关

javascript - Angularjs 如何在 Google map 上使用 ng-Repeat 添加/删除动态输入表单?

android - 打开谷歌地图应用并在flutter webview中显示逐向导航

algorithm - 在有障碍物的网格上填充固定大小的正方形

javascript - JQuery:延迟加载 JQuery 和 '$ not defined'

android - map V2 标记按下状态