多个回调以获取谷歌地图的距离和持续时间

Question

我正在努力在谷歌地图中生成一个信息窗口，该窗口显示来自 mySQL 数据库的附近位置列表以及它们与用户可以拖动的地标的距离和时间。

我能做的最好的就是显示位置，但不显示时间和距离的信息——我可以访问它并在警报中显示，但不能在信息窗口上显示。我认为我的问题是我正在尝试执行 2 个操作（mySQL 查询以获取列表和 google 距离矩阵 api 以获取时间/距离），每个操作都需要回调，但不明白如何将所有输出组合在一起以显示没有未定义值问题的信息窗口。

function get_nearby_plants(location){
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + location.lat() + '&lng=' +  location.lng();
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markerNodes.length; i++) {    // replace 1 with markerNodes.length
    buyername[i] = markerNodes[i].getAttribute("BuyerName");
    // more populating arrays
    calculateDistances(pass_start, pass_dest)    // this function is to get drive distances and times and display them but i dont
    // know how to include them with the data in the array
  } // end for i= loop

var c=0;
var output = '<table border=1><tr><td colspan=3><font size=2>Potential Suppliers</td><td><font size=2>Address</td><td><font size=2>Distance</td></font></tr>';
  //to populate an html table to go in the infowindow
  for (c = 0; c < resultcount; c++){
    output = output + '<tr><td><font size=1>' + buyerid[c] + '</td><td><font size=1>' + buyername[c] + '</td><td><font size=1>' + buyerparent[c]+ '</td><td><font size=1>' +
    buyeraddress[c] + '</td><td><font size=1>' + kms[c] + 'km</td><td><font size=1>' + myStart[c] + '</td><td><font size=1>' + myDest[c] + '</td></font></tr>';
  }

  var contentstring='<div id="content"><div id="siteNotice"></div><div id="bodyContent"><p><b>test'+ display_string +'</b></div></div>';

  var infowindow = new google.maps.InfoWindow({
    content: output
  });
infowindow.open(map,marker);  
});
} // end function get_nearby_plants()

function calculateDistances(myStart, myDest) {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
  {
    origins: [myStart],
    destinations: [myDest],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, callback);
  }

  function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
  alert('Error was: ' + status);
} else {
  var origins = response.originAddresses;          
  var destinations = response.destinationAddresses;          
  var mykms=0;
  var mytime=0;
  var timeoutput='';
  var myoutput='<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++) {
        mykms=Math.round(results[j].distance.text);
        mytime=Math.round(results[j].duration.text);
        timeoutput += origins[i] + ' to ' + destinations[j] + ': ' + results[j].distance.text + ' in ' + results[j].duration.text + '<p>';
    }  //for j=0
  } //for i=0 (loops through for each instance of a destination to check time/distance from start
} //end else statement
} // end function


function deleteOverlays() {
  for (var i = 0; i < markersArray.length; i++) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}

Answer 1

您也可以在没有任何服务的情况下计算距离。

function calculateDistance(lat1, lon1, lat2, lon2, unit) {
  var radlat1 = Math.PI * lat1/180;
  var radlat2 = Math.PI * lat2/180;
  var radlon1 = Math.PI * lon1/180;
  var radlon2 = Math.PI * lon2/180;
  var theta = lon1-lon2;
  var radtheta = Math.PI * theta/180;
  var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
  dist = Math.acos(dist);
  dist = dist * 180/Math.PI;
  dist = dist * 60 * 1.1515;
  if (unit=="K") { dist = dist * 1.609344; }
  if (unit=="N") { dist = dist * 0.8684; }
  return dist;
}