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

google.maps.event.addListener is not a function

本文关键字：一个 函数 maps event addListener google      更新时间：2023-09-26

我一直在尝试将信息窗口添加到我的标记中，但由于可用的 SO 答案很旧，所以我被困住了。我有这个代码对应于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

创建事件侦听器函数的匿名函数的定义中存在错误。您的代码：

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));

工作小提琴

代码片段：

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>

像这样的典型错误与 API 的错误使用有关。这里的问题是您将谷歌地图版本两个对象与版本3混合在一起。仔细检查手册。

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

相关文章：