添加监听器时Google地图V3未加载地图

Question

我正在尝试向Google地图添加idle监听器。

问题：当我添加的侦听器，如下图所示，我得到的错误Cannot read property '__e3_' of undefined

JS代码

google.maps.event.addListener(map, 'idle', function() { 
      console.log('hello'); 
} 

我解决它通过添加setTimeout(..., 1000)，以确保地图在一秒之后加载。

问题：

1. 是错误因地图没有被加载？
2. 这是解决它的最好方法吗？
3. 这个问题是否应该发生？我猜如果我添加这个相同的侦听器来映射没有其他代码，这个错误不会弹出。

编辑

地图

<script type="text/javascript"> 
var map; 
var geocoder; 
var directionsService = new google.maps.DirectionsService(); 

function initialize() { 
    var center_latlng = new google.maps.LatLng(42.354183,-71.065063); 
    var options = { 
     zoom: 15, 
     minZoom: 11, 
     maxZoom: 19, 
     center: center_latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), options); 

    var Style = [ 
     { 
     featureType: "poi", 
     elementType: "labels", 
     stylers: [ 
      { visibility: "off" } 
     ] 
     },{ 
     featureType: "landscape", 
     elementType: "labels", 
     stylers: [ 
      { visibility: "off" } 
     ] 
     } 
    ] 
    map.setOptions({styles: Style}); 

    geocoder = new google.maps.Geocoder(); 

    // Marker Clusterer 
    var styles = {styles: [{ 
         height: 34, 
         url: "images/template/markers/cluster.png", 
         width: 34, 
         textColor: '#FFF', 
         textSize: 12 
        }, 
        { 
         height: 56, 
         url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png", 
         width: 56 
        }, 
        { 
         height: 66, 
         url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png", 
         width: 66 
        }, 
        { 
         height: 78, 
         url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png", 
         width: 78 
        }, 
        { 
         height: 90, 
         url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png", 
         width: 90 
        }] 
       }; 
    var mcOptions = {gridSize: 50, maxZoom: 15, styles: styles['styles']}; 
    mc = new MarkerClusterer(map, [], mcOptions); 

} 
</script> 

的初始化

Answer 1

1）不完全是，这种类型的错误发生，因为您要访问的对象不存在在您尝试附加侦听器的时候。在地图变量包含Google地图对象后，必须附加侦听器代码。你什么时候尝试附加听众？我没有在初始化代码中看到它。

2.）不，超时是不可靠的。如果初始化时间延迟，地图对象可能仍未以指定的时间间隔初始化。

3.）您不能访问不存在的对象的属性。实例化地图对象后，在init方法中添加侦听器将解决此问题。

var map; 

function initialize() { 
    var center_latlng = new google.maps.LatLng(42.354183, -71.065063); 

    var options = { 
     zoom: 15, 
     minZoom: 11, 
     maxZoom: 19, 
     center: center_latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    //instantiate map object 
    map = new google.maps.Map(document.getElementById("map_canvas"), options); 

    //attach listener to the map object. 
    google.maps.event.addListener(map, 'idle', function() { 
     console.log('hello'); 
    }); 
} 

这里是一个工作拨弄着上面的代码：http://jsfiddle.net/R7d6L/