0

プログラミングは全くの初心者ですので、よろしくお願いします。Codecademy の大部分を最近読み終えたばかりで、数冊の本を読んだので、間違いなく初心者です。Google マップ API を介した Google プレイス ライブラリ呼び出しの結果を反復処理し、返されたオブジェクトのプロパティを HTML の要素に書き込む関数を設定しました。innerHTML の最初の 3 つのインスタンスでこれを成功させました (stackoverflow コミュニティの助けを借りて、皆さんに感謝します!)。4 番目のインスタンスで大きな問題が発生しています。

Google Maps が提供する Distance Matrix サービスを呼び出し、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>

フィードバックをお寄せいただきありがとうございます。私を夢中にさせているのは、最初の 3 つが完全に機能しているのに、4 つ目がうまく連携していないという事実です。私は、愚かな初心者の間違いを見つけるのに役立つ新しい目を探しているか、これが機能しない理由についての説明を探しています。ありがとう！

4

2 に答える 2

1

あなたはループ内の非同期関数の古典的な問題に苦しんでいます。

行の直後にこれを追加してみてくださいfor(...) {：

(function(i) {

そしてこれは対応する直前に}：

})(i);

これにより、問題の価値が「固定」され、i問題が解決されます。

于 2013-03-04T05:55:57.933 に答える
0

あなたの機能distanceCallbackは非同期機能です。親関数のループで変数を更新しているため、このコールバック関数distanceCallbackが呼び出されると、無効な値または異なる値が含まれますfoodDistance[0]foodDistancefor

于 2013-03-04T05:43:35.963 に答える