谷歌地圖不顯示標記描述

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++) { 
 
    \t 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

要了解爲什麼它不工作，我們需要了解如何關閉工作。

閉包有權訪問其自己的作用域（在其大括號之間定義的變量），可以訪問外部函數的變量以及訪問全局變量。

需要注意的是，即使外部函數返回並且存儲對實際變量的引用，閉包也可以訪問外部函數的變量。

現在如果您的代碼爲for循環在JavaScript中沒有範圍和變量只聲明一次。

現在重要的是異步代碼無法運行，直到所有同步代碼完成。所以，當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++) { 
 
    \t 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> 
 

 
<