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

Google Maps V3 Map not loaded when adding listener

本文关键字：Maps V3 地图 Google 加载 监听器 添加      更新时间：2023-09-26

我正在尝试添加一个idle监听器到谷歌地图。

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

<<p> JS代码/strong> 
google.maps.event.addListener(map, 'idle', function() {
            console.log('hello');
}

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

:

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

编辑

Map初始化

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

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

2)。不，超时不可靠。如果初始化存在延迟，则映射对象仍可能无法在指定的时间间隔内初始化。

3)。您不能访问不存在的对象的属性。在map对象实例化后在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/
相关文章：