如何向谷歌地图信息窗口添加功能答案

【问题标题】：How to add a function to a google maps info window如何向谷歌地图信息窗口添加功能
【发布时间】：2018-04-09 18:56:18
【问题描述】：

我有一个函数，它在末尾生成一个名为 TotalMiles 的变量。我需要将它添加到我的代码末尾的内容窗口中。但是，我不断收到一条错误消息，指出该变量未定义。如何访问我的索引文件中的 TotalMiles 变量以用于 Rails 应用程序？

//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 +""
          });
}

【问题讨论】：

标签： javascript ruby-on-rails google-maps

【解决方案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 + "");
                }
            });
        }
    }
}

【讨论】：

很高兴我能哭。谢谢
? 不客气，希望解释是有道理的！

【解决方案2】：

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

【讨论】：