0

いくつかのマーカーを使用して Google マップを必要とする Web サイトを作成しようとしています。JavaScript の 2D 配列を複数回読み取るとエラーが発生します。

未定義のプロパティ '0' を読み取れません

そしてここに私のコード

function initialize() {
          var locations = [
          //'City',LatLng,LatLng,Zoom
          ['Egypt', 26.820553, 30.802498, 6], //Center of whole map
          ['Alexandria', 'Egypt'], //pointer
          ['Mansoura', 'Egypt'], //pointer
          ['Assiut', 'Egypt'] //pointer
          ];

          var mapOptions = {
              zoom: locations[0][3],
              center: new google.maps.LatLng(locations[0][1], locations[0][2]),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };

          var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);

          var infowindow = new google.maps.InfoWindow();

          var marker, i;
          var geocoder = new google.maps.Geocoder();
          var image = 'flag.png';

          for (i = 1; i < locations.length; i++) {
              geocoder.geocode({ 'address': locations[i][0] + ' ' + locations[i][1] }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {

                      marker = new google.maps.Marker({
                          animation: google.maps.Animation.DROP,
                          map: map,
                          icon: image,
                          position: results[0].geometry.location,
                          title: locations[i][0]
                      });

                      google.maps.event.addListener(marker, 'click', (function (marker, i) {
                          return function () {
                              infowindow.setContent('<b style="font-size:30px;">' + locations[i][0] + '</b>'
                                  + '<br><b>Starting Date:</b> 11/5/2012'
                                  + '<br><b>Ending Date:</b> 30/5/2012'
                                  + '<br><a href="google.com">Event Website</a>');
                              infowindow.open(map, marker);
                          }
                      })(marker, i));
                  }
              });
          }
      }

      function loadScript() {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyA6yYH66F1L3NgHAobufuUF6l-jjVCLwfE&sensor=false&' +
          'callback=initialize';
          document.body.appendChild(script);
      }

      window.onload = loadScript;

location[i][0] を何度も読み取ろうとすると、このセクションでエラーが発生しました。

for (i = 1; i < locations.length; i++) {
              geocoder.geocode({ 'address': locations[i][0] + ' ' + locations[i][1] }, function (results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {

                      marker = new google.maps.Marker({
                          animation: google.maps.Animation.DROP,
                          map: map,
                          icon: image,
                          position: results[0].geometry.location,
                          title: locations[i][0]
                      });

                      google.maps.event.addListener(marker, 'click', (function (marker, i) {
                          return function () {
                              infowindow.setContent('<b style="font-size:30px;">' + locations[i][0] + '</b>'
                                  + '<br><b>Starting Date:</b> 11/5/2012'
                                  + '<br><b>Ending Date:</b> 30/5/2012'
                                  + '<br><a href="google.com">Event Website</a>');
                              infowindow.open(map, marker);
                          }
                      })(marker, i));
                  }
              });
          }

とにかく、このコードをC＃コードビハインドで処理できる場合は、それがいいでしょう

4

1 に答える 1

3

[ についての以前のコメントは無視してresultsください ]

問題はi、 geocode() コールバックで参照していることです。geocode() メソッドは非同期です。つまり、コールバックはfor ループが終了した後に呼び出されます。その時点でi= 4 で、location[i] が定義されていないことを意味します。

それが意味をなさない場合は、クロージャーがどのように機能するかを読む必要がありますが、基本的な解決策は、for ループ内のコードを別の関数に入れ、操作したい場所のエントリを渡すことです。

function geocodeLocation(location) {
  geocoder.geocode({ 'address': location[0] + ' ' + location[1] },
    function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        marker = new google.maps.Marker({
          animation: google.maps.Animation.DROP,
          map: map,
          icon: image,
          position: results[0].geometry.location,
          title: location[0]
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
          return function () {
            infowindow.setContent('<b style="font-size:30px;">' + location[0] + '</b>'
              + '<br><b>Starting Date:</b> 11/5/2012'
              + '<br><b>Ending Date:</b> 30/5/2012'
              + '<br><a href="google.com">Event Website</a>');
            infowindow.open(map, marker);
          }
        })(marker, i));
      }
    }
  );
}


for (var i = 1; i < locations.length; i++) {
  geocodeLocation(locations[i]);
}
于 2012-11-25T13:39:26.870 に答える