添加事件监听器会导致Google Map冻结

Question

我正在尝试在我的网页上创建一个带有标记的谷歌地图。我有一个无序列表，其中每个项目都有纬度，经度和标题的数据属性。使用JQuery我将拉出这些值并在地图上为列表中的每个项目生成一个标记。一切似乎都可行，但谷歌地图在你平移地图时不会加载图块。

这是我初始化地图的方式：

var map;
// initialize google map
$(function () {
    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(CoordinatesLat, CoordinatesLong),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    }
    // initiate map
    map = new google.maps.Map($("#map")[0], myOptions);

    // when map is loaded, add events and behaviors to it
    google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event")); //commenting this line prevents GMAP problems
});

仅供参考 - 在我使用maps.event.addListener（）之前，地图会暂时工作，然后变得完全没有响应。将其更改为maps.event.addListenerOnce（）会停止冻结但仍然存在切片加载问题。

这就是回调，显然我做错了什么：

//add events from event list to map.  add behavior to events ie. mouseover
function addEventsToMap(selector) {
    $(selector).each(function (i, $e) {
        $e = $($e);
        var latlng;
        if ($e.attr("data-geo-lat") && $e.attr("data-geo-long")) {
            latlng = new google.maps.LatLng($e.attr("data-geo-lat"), $e.attr("data-geo-long"));

            $e.marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: $e.attr("data-title")
            });

            google.maps.event.addListener($e.marker, 'click', function () { window.location = $e.attr("data-href"); });
            google.maps.event.addListener($e.marker, 'mouseover', function () { $e.addClass("event-hover"); });
            google.maps.event.addListener($e.marker, 'mouseout', function () { $e.removeClass("event-hover"); });

            //when mouse hovers over item in list, center map on it's marker
            $e.mouseenter(function () {
                map.panTo(latlng);
            });
        }
    });
}

知道可能导致这种情况的原因吗？

Answer 1

我看到了一个问题，虽然我不确定这是不是问题。如果你检查这一行：

google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event"));

你打算做的是在加载地图后调用你的'addEventsToMap'，而是你正在做的是调用函数然后将它的返回值指定为监听器。

你需要这个，我认为它不应该再崩溃了。

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
  addEventsToMap(".event");
});

如果这不起作用，我建议您查看正在使用的浏览器的Javascript控制台，以查看发生地图崩溃时发生的错误。