多次回调以获取Google地图的距离和持续时间

Question

I am struggling to produce an infowindow in google maps that displays a list of nearby locations from a mySQL db and their distance and time from a placemark the user can drag around.

The best I can do is to display the locations but not the info for the time and distance - i can access it and display in an alert, but not on the infowindow. I think my problem is that i am trying to perform 2 actions (mySQL query to get list and google distance matrix api to get time/distnace) that each require callbacks but don't understand how i can combine all the output together to display the infowindow without the undefined values problem.

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

You could also calculate distances without any service.

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;
}