Question

我想在点击标记时显示标题/说明。标记显示但未显示点击描述。我在控制台日志中看到错误消息是“Uncaught TypeError：无法读取未定义的属性'0'在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

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

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

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

现在，对于您的代码，JavaScript中的 for loops 没有范围，变量只声明一次。

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

现在要解决这个问题，我们可以使用自己的作用域运行一个新函数，这样在循环内部的回调中，每个不同的值都有一个新的闭包。

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

＆＃13;

   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));
    }

＆＃13;

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

＆＃13;

<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>

<

＆＃13;

Google地图未显示标记说明

1 个答案: