Question

我一直在努力为我的标记添加infowindows，因为可用的SO答案非常陈旧，所以我被困住了。我有这个代码对应于SO中的this回答：

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

代码段

＆＃13;

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']
];

＆＃13;

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

＆＃13;

<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"></script>
<div id="mapa_ciudad"></div>

＆＃13;

Answer 2

这类典型错误与API的错误使用有关。这里的问题是您将Google Maps version two个对象与Version 3混合在一起。仔细检查手册。

对于您的情况，如果您使用的是V.3，请参考this example，事件处理程序的调用方式略有不同。

google.maps.event.addListener不是一个函数

2 个答案: