0

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

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

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>

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

4

2 回答 2

1

您正在遭受循环中的异步函数的经典问题。

尝试在该for(...) {行之后添加：

(function(i) {

而这在相应的之前}：

})(i);

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

于 2013-03-04T05:55:57.933 回答
0

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

于 2013-03-04T05:43:35.963 回答