Google Maps API - 多个标记 - 数组错误答案

【问题标题】：Google Maps API - Multiple markers - Array errorsGoogle Maps API - 多个标记 - 数组错误
【发布时间】：2019-10-03 08:59:08
【问题描述】：

我有一个简单的错误，但我找不到问题（可能很简单）。

我有不同的 LatLng 标记，每个标记都有信息窗口。我有两个数组：一个用于位置，一个用于内容。但是当我在数组上循环时，第二次迭代出现错误

无法读取未定义的属性“1”

                $(window).on('load', function() {
                    var mapStyle = [{
                        'featureType': 'administrative',
                        'elementType': 'labels.text.fill',
                        'stylers': [{
                            'color': '#444444'
                        }]
                    }, {
                        'featureType': 'landscape',
                        'elementType': 'all',
                        'stylers': [{
                            'color': '#f2f2f2'
                        }]
                    }, {
                        'featureType': 'poi',
                        'elementType': 'all',
                        'stylers': [{
                            'visibility': 'off'
                        }]
                    }, {
                        'featureType': 'road',
                        'elementType': 'all',
                        'stylers': [{
                            'saturation': -100
                        }, {
                            'lightness': 45
                        }]
                    }, {
                        'featureType': 'road.highway',
                        'elementType': 'all',
                        'stylers': [{
                            'visibility': 'simplified'
                        }]
                    }, {
                        'featureType': 'road.arterial',
                        'elementType': 'labels.icon',
                        'stylers': [{
                            'visibility': 'off'
                        }]
                    }, {
                        'featureType': 'transit',
                        'elementType': 'all',
                        'stylers': [{
                            'visibility': 'off'
                        }]
                    }, {
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': [{
                            'color': '#4f595d'
                        }, {
                            'visibility': 'on'
                        }]
                    }];

                    var locations = [
                      [48.8742211,2.3029689],
                      [48.8675875,2.3511199],
                      [48.8889844,2.3859886],
                    ];

                    var info = [
                      ["Boulangerie", 25],
                      ["Boucherie", 47],
                      ["Boucherie 2", 18],
                    ];

                    var map = new google.maps.Map(document.getElementById("carte"), {
                        zoom: 14,
                        styles: mapStyle,
                        center: new google.maps.LatLng(48.8803486, 2.3173236)
                    });

                    for (var i = 0; i < locations.length; i++) {
                      console.log(i);
                      console.log(locations[i]);
                      console.log(info[i]);
                      var coords = locations[i];
                      var latLng = new google.maps.LatLng(coords[0], coords[1]);

                      var marker = new google.maps.Marker({
                          position: latLng,
                          map: map
                      });

                      var info = new google.maps.InfoWindow({
                        marker: marker,
                        content: info[i][1]
                      });

                      google.maps.event.addListener(marker, 'click', function(marker, i) {
                        return function() {
                          info.open(map, marker);
                        }
                      }(marker, i));
                    }
                });

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="carte" style="width:100%; height:100%"></div>

    </body>
      <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
      <script src="/js/snazzy-info-window.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</html>

【问题讨论】：

标签： javascript google-maps google-maps-markers

【解决方案1】：

改变这个

var info = new google.maps.InfoWindow({
                        marker: marker,
                        content: info[i][1]
                      });
 google.maps.event.addListener(marker, 'click', function(marker, i) {
                        return function() {
                          info.open(map, marker);
                        }
 }(marker, i));

到

var infoWindow = new google.maps.InfoWindow({
                        marker: marker,
                        content: info[i][1]
                      });
 google.maps.event.addListener(marker, 'click', function(marker, i) {
                        return function() {
                          infoWindow.open(map, marker);
                        }
                      }(marker, i));

你有两个同名的变量info

【讨论】：

太好了，看来我还没醒