Question

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

我为每个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>

Answer 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

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

1 个答案: