在DistanceMatrixStatus中传递参数回调或设置变量值

google maps api 3 - Javascript Pass Parameter to Callback or Set Variable Value in DistanceMatrixStatus

本文关键字：回调 设置 变量值 参数 DistanceMatrixStatus      更新时间：2023-09-26

我一直在玩一点谷歌的DistanceMatrixService。下面的代码可以工作，但是，我如何将另一个参数传递给回调函数或从回调中获取一个值呢?

例如:我有两个div，我想在(Results1和Results2)中显示不同的结果，所以我认为我需要
传递另一个值给GoogleMapDistance函数，如GoogleMapDistance(YourLatLong,DestLatLong,TheDiv)
或
能够在回调document.getElementById("Results1")外部获取ResultStr。innerHTML = ResultStr;
或
将innerHTM设置为函数document.getElementById("Results1")的返回值。innerHTML = GoogleMapDistance(YourLatLong,DestLatLong);

我卡住了。我怎样才能做到这一点呢?现在的情况是，我只能运行所有这些代码一次，并且只写入一个div。

<div id="Results1"></div>
<div id="Results2"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function GoogleMapDistance(YourLatLong,DestLatLong)
{
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
    {
    origins: [YourLatLong],
    destinations: [DestLatLong],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
    }, callback);
}
function callback(response, status)
{
    if (status == google.maps.DistanceMatrixStatus.OK)
    {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
      for (var i = 0; i < origins.length; i++)
      {
          var results = response.rows[i].elements;
          for (var j = 0; j < results.length; j++)
          {
              var element = results[j];
              var from = origins[i];
              var to = destinations[j];
              var distance = element.distance.text;
              var duration = element.duration.text;
              var ResultStr = distance + "&nbsp; (<i>" + duration + "</i>)";
          }
      }
    document.getElementById("Results1").innerHTML = ResultStr;
    }
}
var YourLatLong = "45.4049,-122.797997";
var DestLatLong1 = "47.468893,-122.227978";
var DestLatLong2 = "61.221274,-149.831545";
GoogleMapDistance(YourLatLong,DestLatLong1);
</script>

你不能改变Google调用回调的方式，但是你可以让它调用你自己的本地函数作为回调，然后让它(通过闭包)在添加所需的额外参数后调用另一个回调，像这样:

function GoogleMapDistance(YourLatLong,DestLatLong, item)
{
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
    {
    origins: [YourLatLong],
    destinations: [DestLatLong],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
    }, function(response, status) {callback(response, status, item)});
}

或者，你可以内联定义回调，这样它就可以直接访问父函数变量:

function GoogleMapDistance(YourLatLong,DestLatLong, item)
{
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix(
    {
    origins: [YourLatLong],
    destinations: [DestLatLong],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
    }, function callback(response, status)
    {
        // you can access the parent scope arguments like item here
        if (status == google.maps.DistanceMatrixStatus.OK)
        {
        var origins = response.originAddresses;
        var destinations = response.destinationAddresses;
          for (var i = 0; i < origins.length; i++)
          {
              var results = response.rows[i].elements;
              for (var j = 0; j < results.length; j++)
              {
                  var element = results[j];
                  var from = origins[i];
                  var to = destinations[j];
                  var distance = element.distance.text;
                  var duration = element.duration.text;
                  var ResultStr = distance + "&nbsp; (<i>" + duration + "</i>)";
              }
          }
        document.getElementById("Results1").innerHTML = ResultStr;
        }
    }
)}
相关文章：