6

Google の DistanceMatrixService で少し遊んでいます。以下のコードは機能しますが、別のパラメーターをコールバック関数に渡したり、コールバックから値の 1 つを取得したりするにはどうすればよいでしょうか?

例: 異なる結果を表示したい 2 つの div (Results1 と Results2) があるので、GoogleMapDistance(YourLatLong,DestLatLong,TheDiv) の
ような別の値を GoogleMapDistance 関数に渡す か、 取得できるようにする必要があると考えています。コールバックdocument.getElementById("Results1").innerHTML = ResultStr の外部の ResultStr; または 、innerHTM を関数 document.getElementById("Results1").innerHTML = GoogleMapDistance(YourLatLong,DestLatLong) の戻り値に設定します。



私は立ち往生しています。どうすればこれを達成できますか? 現時点では、このコードをすべて 1 回しか実行できず、1 つの 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>
4

1 に答える 1

11

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

)}
于 2012-12-27T22:29:54.327 に答える