2016-01-22 192 views
0

我一直在试图添加infowindows到我的标记,我卡住了,因为可用的SO答案很旧。我有这样的代码对应于this答案在SO:google.maps.event.addListener不是函数

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

+0

为什么downvote? ... wtvs – alejoss

回答

2

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

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

+0

好吧,我不得不接受答案,即使它是一个工作代码,因为真正的问题是我使用api-v3 ...你在我的代码中发现了一个明显的问题,非常感谢为此,但标题中提到“google.maps.event.addListener不是一个函数”,尽管你对我有很大的帮助,但我必须随之解释标题问题。而你有效解决的问题并没有给出“不是功能”错误。 – alejoss

+0

我在我的小提琴中再现了你的错误,然后修复了它... – geocodezip

+0

对不起,我错了,你在哪里没错。再次接受你的答案。 – alejoss

0

典型的错误,如连接到API的错误用法。这里的问题是,您正在混合Google Maps version two对象与Version 3。仔细检查手册。

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