Question

我有一个函数，在最后生成一个名为TotalMiles的变量。我需要在代码末尾将其添加到我的内容窗口。但是，我一直收到一个错误，说变量未定义。如何在我的索引文件中访问rails应用程序的TotalMiles变量？

//ADD MARKERS
function addMarker(props) {
      let marker = new google.maps.Marker({
        position: props.coordinates,
        map:resultsMap
    });

        //FINDING DISTANCE IF THERE ARE COORDINATES
        if(props.coordinates) {
          var service = new google.maps.DistanceMatrixService;
          if(props.State == "IN") {
            service.getDistanceMatrix({
              origins: ["6400 Brotherhood Way"],
              destinations: [props.coordinates],
              travelMode: 'DRIVING',
              unitSystem: google.maps.UnitSystem.IMPERIAL,
              avoidHighways: false,
              avoidTolls: false
            }, function(response, status) {
              if (status !== 'OK') {
                alert('Error was: ' + status);
              } else {
                deleteMarkers(markersArray);

                //SETTING DISTANCE AND DURATION EQUAL TO A VARIABLE
                TotalMiles = response.rows[0].elements[0].distance["text"];
                console.log(TotalMiles);
                duration = response.rows[0].elements[0].duration["text"];
              }
            });

          //MAKING AN INFO WINDOW WITH CONTENT
          var infoWindow = new google.maps.InfoWindow({
            content:"Adjuster name: " + props.Adjustername + "<br/>Coverage Type: " + props.Adjustment + "<br/> Firm Name: " + props.firmName + "<br/> Phone Number: " + props.Phone + "<br/> Comments: " + props.content + "<br/> Website: " + props.Website + "<br/> Email: " + props.email + "<br/> Distance: " + TotalMiles + "  miles" + "<br/>" + props.EditContent +""
          });
}

Answer 1

getDistanceMatrix方法发出异步请求。这意味着您的代码在转到service.getDistanceMatrix之前不会等待var infoWindow = new google.maps.InfoWindow({content:...});从请求中获得结果。

因此，当该行（var infoWindow = ...）执行时，请求仍然没有完成并从Web服务器检索结果。这反过来意味着回调函数（以function(response, status) {...}开头）尚未执行，因此尚未创建TotalMiles。

关键是在您收到距离矩阵请求的结果后设置信息窗口的内容。我将您的代码更改为以下内容：

//ADD MARKERS
function addMarker(props) {
    let marker = new google.maps.Marker({
        position: props.coordinates,
        map: resultsMap
    });

    //FINDING DISTANCE IF THERE ARE COORDINATES
    if (props.coordinates) {
        var service = new google.maps.DistanceMatrixService;
        if (props.State == "IN") {

            // CREATE AN INFO WINDOW INSTANCE 
            var infoWindow = new google.maps.InfoWindow();                

            service.getDistanceMatrix({
                origins: ["6400 Brotherhood Way"],
                destinations: [props.coordinates],
                travelMode: 'DRIVING',
                unitSystem: google.maps.UnitSystem.IMPERIAL,
                avoidHighways: false,
                avoidTolls: false
            }, function(response, status) {
                if (status !== 'OK') {
                    alert('Error was: ' + status);
                } else {
                    deleteMarkers(markersArray);

                    //SETTING DISTANCE AND DURATION EQUAL TO A VARIABLE
                    TotalMiles = response.rows[0].elements[0].distance["text"];
                    console.log(TotalMiles);
                    duration = response.rows[0].elements[0].duration["text"];

                    infoWindow.setContent("Adjuster name: " + props.Adjustername + "<br/>Coverage Type: " + props.Adjustment + "<br/> Firm Name: " + props.firmName + "<br/> Phone Number: " + props.Phone + "<br/> Comments: " + props.content + "<br/> Website: " + props.Website + "<br/> Email: " + props.email + "<br/> Distance: " + TotalMiles + "  miles" + "<br/>" + props.EditContent + "");
                }
            });
        }
    }
}

Answer 2

TotalMiles永远不会在此代码块中声明。在if(props.coordinates) {之前您可以说var TotalMiles = 0;，即使没有提供坐标，也会定义它。但是，如果service.getDistanceMatrix是异步的，TotalMiles将始终显示为0，因为JS将在AJAX处理时继续执行。在这种情况下，您将要在响应回调中创建infoWindow。

如何将功能添加到谷歌地图信息窗口

2 个答案: