javascript - 谷歌地图不显示标记的描述

Question

我想在单击标记时显示标题/描述。标记已显示，但单击说明未显示。我在控制台日志中看到错误消息是“Uncaught TypeError: Cannot read property '0' of undefined on line no 40”，我不知道我的代码有什么问题，有人可以帮助我吗？

   var locations = [
      ['Asia','Asia'],
      ['America','America'],
      ['India','India']
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 1,
      center: new google.maps.LatLng(0,0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

    for (i = 0; i < locations.length; i++) { 
    	var url = 'http://maps.googleapis.com/maps/api/geocode/json?address='+locations[i][1]+'&sensor=false';
        $.getJSON(url, function (data) {
            var p = data.results[0].geometry.location;
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            marker = new google.maps.Marker({
                position: latlng,
                map: map
            }); 

         google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
          }
          })(marker, i));
       });
    }

#map{
   height:400px;
   width:500px; 
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<div id="map"></div>

<

Answer 1

要理解为什么它不起作用，我们需要了解闭包是如何工作的。

闭包可以访问自己的作用域(在大括号之间定义的变量)，可以访问外部函数的变量，还可以访问全局变量。

需要注意的是，即使外部函数返回并且它存储对实际变量的引用，闭包也可以访问外部函数的变量。

现在，在您的代码中，JavaScript 中的 for 循环没有作用域，并且变量仅声明一次。

现在重要的是，异步代码在所有同步代码完成之前无法运行。因此，当 getJSON 回调运行时，因为它们对同一变量 i 有一个闭包，所以它们都使用 i 的当前值，因为回调在循环完全完成创建回调后运行

现在为了解决这个问题，我们可以放置一个新函数在其自己的范围内运行，以便在循环内的回调中，每个不同的值都有一个新的闭包。

这是更新后的代码。修改了 getJSON 部分并添加了所需的闭包。

   var locations = [
      ['Asia','Asia'],
      ['America','America'],
      ['India','India']
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 1,
      center: new google.maps.LatLng(0,0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

    for (i = 0; i < locations.length; i++) { 
    	var url = 'http://maps.googleapis.com/maps/api/geocode/json?address='+locations[i][1]+'&sensor=false';
        $.getJSON(url, (function (i) {
             return function(data) {
                var p = data.results[0].geometry.location;
                var latlng = new google.maps.LatLng(p.lat, p.lng);

                marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                 
                 
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    console.log(i);
                    console.log(locations)
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
            };
         })(i));
    }

#map{
   height:400px;
   width:500px; 
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<div id="map"></div>

<