如何向Google Maps信息窗口添加功能

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方法發出異步請求。 這意味着您的代碼在進入var infoWindow = new google.maps.InfoWindow({content:...});之前不會等待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) {之前if(props.coordinates) {您可以說var TotalMiles = 0; ，那么即使沒有提供坐標也可以定義它。 但是，如果service.getDistanceMatrix是異步的， TotalMiles將始終顯示為0，因為JS將在AJAX處理期間繼續執行。 在這種情況下，您需要在響應回調內部創建infoWindow 。