javascript - google.maps.event.addListener 不是函数

Question

我一直在尝试将信息窗口添加到我的标记中，但我被卡住了，因为可用的 SO 答案已经很旧了。我有对应于 this 的代码在 SO 中回答:

var map_center = new google.maps.LatLng(-0.179041, -78.499211);
        var map = new google.maps.Map(document.getElementById('mapa_ciudad'),
                mapOptions);

        marker_objects = [];

        for (i = 0; i < markers.length; i++){
            marker = new google.maps.Marker({
               position: new google.maps.LatLng(markers[i][1], markers[i][2]),
               map : map,
               title: markers[i][0]
            });

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

            google.maps.event.addListener(marker, "click", function(marker){   
    // !!! PROBLEM HERE
                return function(){
                    var content = [marker.title];
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                }
            })(marker);

            marker_objects.push(marker);
        }

        function AutoCenter(){
            var bounds = new google.maps.LatLngBounds();
            $.each(marker_objects, function(index, marker){
               bounds.extend(marker.position)
            });
            map.fitBounds(bounds);
        }

        AutoCenter();

我收到错误 TypeError: google.maps.event.addListener(...) is not a function

Answer 1

您在创建事件监听器函数的匿名函数的定义中有错误。您的代码:

google.maps.event.addListener(marker, "click", function(marker){   
// !!! PROBLEM HERE
    return function(){
        var content = [marker.title];
        infowindow.setContent(content);
        infowindow.open(map, marker);
    }
})(marker);

应该是(注意额外的一组括号):

google.maps.event.addListener(marker, "click", (function(marker) {
  return function(evt) {
    var content = marker.getTitle();
    infowindow.setContent(content);
    infowindow.open(map, marker);
  }
})(marker));

working fiddle

代码片段:

function initialize() {
  var map_center = new google.maps.LatLng(-0.179041, -78.499211);
  var map = new google.maps.Map(document.getElementById('mapa_ciudad'), {
    zoom: 4,
    center: map_center
  });

  marker_objects = [];

  for (i = 0; i < markers.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(markers[i][1], markers[i][2]),
      map: map,
      title: markers[i][0]
    });

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

    google.maps.event.addListener(marker, "click", (function(marker) {
      return function(evt) {
        var content = marker.getTitle();
        infowindow.setContent(content);
        infowindow.open(map, marker);
      }
    })(marker));

    marker_objects.push(marker);
  }

  function AutoCenter() {
    var bounds = new google.maps.LatLngBounds();
    $.each(marker_objects, function(index, marker) {
      bounds.extend(marker.position)
    });
    map.fitBounds(bounds);
  }

  AutoCenter();
}
google.maps.event.addDomListener(window, "load", initialize);
var markers = [
  ['mark 1', 33.890542, 151.274856, 'address 1'],
  ['mark 2', 33.923036, 151.259052, 'address 2'],
  ['mark 3', 34.028249, 151.157507, 'address 3'],
  ['mark 4', 33.800101, 151.287478, 'address 4'],
  ['mark 5', 33.950198, 151.259302, 'address 5']
];

html,
body,
#mapa_ciudad {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapa_ciudad"></div>