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

时间:2014-12-22 18:12:26

标签: javascript jquery google-maps

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

我能做的最好的事情是显示位置但不显示时间和距离的信息 - 我可以访问它并显示警报,但不显示在信息窗口。我认为我的问题是我正在尝试执行2个动作(mySQL查询获取列表和谷歌距离矩阵api以获得时间/分散)每个都需要回调但不知道如何将所有输出组合到一起显示infowindow没有未定义的值问题。

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 = [];
}

1 个答案:

答案 0 :(得分:0)

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

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