Vuejs变量在函数谷歌地图矩阵api问题中使用答案

【问题标题】：Vuejs variable using in function google maps matrix api problemVuejs变量在函数谷歌地图矩阵api问题中使用
【发布时间】：2021-06-26 09:25:26
【问题描述】：

Vuejs 变量在函数谷歌地图矩阵 api 问题中使用。我正在使用谷歌距离矩阵 api 来获取两个位置之间的距离。我在全局范围内声明了一个变量。在函数中更改了此变量。但是按照正常情况，我应该能够在调用我的函数后访问这个更改的变量值。但是现在我无法访问变量的更改值

使用：矩阵 google maps api + 自动完成输入 place api

export default {
data () {
  return {
      data:{
          adrdep:{adrs:'',lat:0,lng:0},
          adrarr:{adrs:'',lat:0,lng:0},
          distance:0,
          date:null,
          time:null,
          check:false,
          camion:'',
          etage:9,
          assenseur:'assenseur'
      }
  }
},
methods: {
  
  getAddressDatadep: function (addressData, placeResultData, id) {
            this.data.adrdep.lat =addressData.latitude;
            this.data.adrdep.lng = addressData.longitude;
  },
  getAddressDataArr: function (addressData, placeResultData, id) {
            this.data.adrarr.lat = addressData.latitude;
            this.data.adrarr.lng = addressData.longitude;
  },
  async getDistance(){
    
        var a1={lat:this.data.adrdep.lat,lng:this.data.adrdep.lng};
        var a2={lat:this.data.adrarr.lat,lng:this.data.adrarr.lng};
        var p1 = new google.maps.LatLng(a1.lat, a1.lng);
        var p2 = new google.maps.LatLng(a2.lat, a2.lng);
        var origins = [a1.lat + "," + a1.lng];
        var destinations = [a2.lat + "," + a2.lng];

        var distanceMatrix = new google.maps.DistanceMatrixService();
        var distanceRequest = {
            origins: origins,
            destinations: destinations,
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        };
         distanceMatrix.getDistanceMatrix(distanceRequest, function(response, status)  {
            var totalDistance
            if (status != google.maps.DistanceMatrixStatus.OK) {
                console.log("error")
            } else {
                var origins = response.originAddresses;
                var destinations = response.destinationAddresses;
                //debugger;
                if (response.rows[0].elements[0].distance != null) {
                     totalDistance = response.rows[0].elements[0].distance.value;
                    var totalTime = response.rows[0].elements[0].duration.value;
                    var ratioPerOneMeter = totalDistance / totalTime;
                    var PRDifference = 0;
                    this.data.distance=totalDistance*0.001;
                    console.log("return distance")
                } else {
                    console.log('The Distance And Time Cannot Be Calculated')
                }
            }
            return totalDistance*0.001;
        });
    
  }

};

请帮帮我:)

【问题讨论】：

你有一个闭包function(response, status) {}，试着写成distanceMatrix.getDistanceMatrix(distanceRequest, (response, status) => {}。也许这有帮助。此外，您可能想查看 Vue computables 而不是这种方法。

标签： javascript php laravel vue.js vuetify.js

【解决方案1】：

  calculateDistances() {

        var a1={lat:this.data.adrdep.lat,lng:this.data.adrdep.lng};
        var a2={lat:this.data.adrarr.lat,lng:this.data.adrarr.lng};
        var p1 = new google.maps.LatLng(a1.lat, a1.lng);
        var p2 = new google.maps.LatLng(a2.lat, a2.lng);
     var service = new google.maps.DistanceMatrixService();
     service.getDistanceMatrix(
           {
              origins: [p1],
              destinations: [p2],
              travelMode: google.maps.TravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.METRIC,
              avoidHighways: false,
              avoidTolls: false
           }, this.callback);

  },
  callback(response, status) {
     if (status != google.maps.DistanceMatrixStatus.OK) {
           alert('Error was: ' + status);
     } else {
           var origins = response.originAddresses;
           var totalDistance = response.rows[0].elements[0].distance.value;
           var totalTime = response.rows[0].elements[0].duration.value;

           this.data.distance=parseFloat(totalDistance*0.001).toFixed(2);
           this.e1=2;
     }
  }

【讨论】：