Question

我是编程新手，所以请耐心等待我。我最近才完成了大量的Codecademy，并阅读了几本书，所以我绝对是一个菜鸟。我已经设置了一个函数，它通过Google Maps API迭代Google Places库调用的结果，并将返回对象的属性写入HTML中的元素。我使用innerHTML的前三个实例成功完成了这一步（使用stackoverflow社区的一些帮助，谢谢大家！）。我遇到了第四个问题的巨大问题。

我打了一个谷歌地图提供的距离矩阵服务的电话，经过几个小时的修补后我终于让它工作了，因为console.log命令似乎正在返回我想要的东西。但foodDistance [0] .innerHTML =距离不起作用！这让我发疯了。这是我的代码，所以你知道我在说什么，以防它不清楚：

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < 10; i++) {
        var place = results[i];
        createMarker(place);
        var foodName = foodArray[i].getElementsByClassName("listing_name");
        var foodRating = foodArray[i].getElementsByClassName("listing_rating");
        var foodAddress = foodArray[i].getElementsByClassName("listing_address");
        var foodDistance = foodArray[i].getElementsByClassName("listing_dist");
        foodName[0].innerHTML = place.name;
        foodRating[0].innerHTML = place.rating;
        foodAddress[0].innerHTML = place.vicinity;
        distanceService.getDistanceMatrix({
            origins: [houston],
            destinations: [place.geometry.location],
            travelMode: google.maps.TravelMode.DRIVING,
            avoidHighways: false,
            avoidTolls: false,
            unitSystem: google.maps.UnitSystem.IMPERIAL
          }, distanceCallback);
        function distanceCallback(response, status) {
          if (status == google.maps.DistanceMatrixStatus.OK) {
              var origins = response.originAddresses;
              for (var x = 0; x < origins.length; x++) {
                var results = response.rows[x].elements;
                for (var j = 0; j < results.length; j++) {
                  var element = results[j];
                  var distance = element.distance.text;
                  foodDistance[0].innerHTML = distance;
                  console.log(distance);
                }
              }
            }
          };
        };
      }
    }

这是带有填充内容的HTML。 listing_name，listing_rating和listing_address都按预期填充：

 <div class="hyperlocal_listing_snippet" id="fd1">
  <div class="listing_name">Stephen's bombass burritos</div>
  <div class="listing_dist">0.2 Miles</div>
  <div class="listing_address">blah blah blah</div>
  <div class="listing_rating">3.2</div>
</div>

提前感谢您的反馈。让我疯狂的是前三个完美运作，但第四个不合作。我要么寻找一双新鲜的眼睛来帮助我挑选出我的愚蠢的noob错误，要么我正在寻找一个解释为什么这不起作用。谢谢！

Answer 1

你在循环中遇到了异步函数的经典问题。

尝试在for(...) {行之后添加此内容：

(function(i) {

这就在对应的}：

之前

})(i);

这将“锚定”i的值并解决您的问题。

Answer 2

您的函数distanceCallback是异步函数。当调用此回调函数distanceCallback时，foodDistance[0]包含无效或不同的值，因为您正在更新父函数中foodDistance循环中的变量for

innerHTML的三个实例正在工作，第四个不是

2 个答案: