jquery - 尝试使用 Google map 预加载图标时出错 - INVALID_STATE_ERR : DOM Exception 11

Question

提前感谢您的帮助，我这几天一直在拔头发。我正在尝试创建一个 jQuery Google map 插件，除了许多其他功能之外，该插件还允许用户指定自定义图标和图标阴影的路径。然后，它应该能够计算出图像的尺寸并将它们放置在 map 上。一切都工作得很好，除了在 IE9 和 Chrome 中某些页面刷新时，只显示一个图标，并且我收到一个 Uncaught Error :INVALID_STATE_ERR: DOM Exception 11。仅供引用，它似乎在 Firefox 中一直有效。

这是插件(例如精简版):

;
(function ($, undefined) {
$.fn.irvMap = function (options) {
    var directionsDisplay, directionsService = new google.maps.DirectionsService(),
        map, cloud, counter = 0,
        i, markers = [],
        infowindow = null,
        request = null,
        settings = $.extend({
            locations: [{
                "name": "Midland",
                "lat": "43.620916",
                "lng": "-84.248028"
            }, {
                "name": "Texas",
                "lat": "32.737328",
                "lng": "-97.107525"
            }]
        }, options);
    var lat = 0;
    var lng = 0;
    var halfzies = function (i) {
            return i / 2
        }
    return this.each(function () {
        var thisElement = this;
        var mapIcon = new Image();
        var mapIconShadow = new Image();
        var icons = mapIcon,mapIconShadow;
        mapIcon.src = "/Images/mapIcon.png";
        mapIconShadow.src = "/Images/mapIconShadow.png";
        icons.onload = function () {
            var image = new google.maps.MarkerImage(mapIcon.src, new google.maps.Size(mapIcon.width, mapIcon.height), new google.maps.Point(0, 0), new google.maps.Point(halfzies(mapIcon.width), halfzies(mapIcon.height)));
            var shadow = new google.maps.MarkerImage(mapIconShadow.src, new google.maps.Size(mapIconShadow.width, mapIconShadow.height), new google.maps.Point(0, 0), new google.maps.Point(halfzies(mapIconShadow.width), halfzies(mapIconShadow.height)));
            var makeMarker = function (location, id) {
                    var point = new google.maps.LatLng(location.lat, location.lng);
                    var markerOptions = {
                        map: map,
                        shadow: shadow,
                        icon: image,
                        position: point
                    };
                    var marker = new google.maps.Marker(markerOptions);
                    //markers.push(marker);
                    marker.setMap(map);
                    var content = '<input type=\"hidden\" id=\"end\" value=\"' + location.lat + ',' + location.lng + '\"/>';
                    content = content.replace(/undefined/g, '');
                    google.maps.event.addListener(marker, 'click', function (e) {
                        if (infowindow) {
                            infowindow.close();
                        }
                        infowindow = new google.maps.InfoWindow({
                            position: marker.getPosition(),
                            map: map,
                            content: content
                        });
                        if (request != null) {
                            request.destination = marker.getPosition()
                            getDirections(request);
                            $('html,body').animate({
                                scrollTop: offset
                            }, 500);
                        }
                    });
                }
            $.each(settings.locations, function (i, val) {
                lat += parseFloat(this.lat) || 0
                lng += parseFloat(this.lng) || 0
            });
            lat = lat / settings.locations.length;
            lng = lng / settings.locations.length;
            var options = {
                center: new google.maps.LatLng(lat, lng),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(thisElement, options);
            var bounds = new google.maps.LatLngBounds();
            $.each(settings.locations, function (i, val) {
                makeMarker(settings.locations[i], i);
                var ll = new google.maps.LatLng(settings.locations[i].lat, settings.locations[i].lng);
                bounds.extend(ll);
            });
            map.fitBounds(bounds);
        }
    })
};
})(jQuery);

我很确定它与此有关:

  var mapIcon = new Image();
  var mapIconShadow = new Image();
  var icons = mapIcon,mapIconShadow;
  mapIcon.src = "/Images/mapIcon.png";
  mapIconShadow.src = "/Images/mapIconShadow.png";
  icons.onload = function () {

但是我在过去的三天里一直在使用这段代码，但似乎无法弄清楚。这是我的测试页面，非常感谢任何帮助:http://lab.interactrv.com/preloadTest.aspx

谢谢。

Answer 1

问题似乎源于此行:

var icons = mapIcon,mapIconShadow;

在我看来，icons 仅分配给图标，而不是阴影，例如正在运行的

var x = 1;
var y = 2;
var n = x, y;

alert(n);  // gives 1, but 2 is in no way associated to n

所以 icons.onload 实际上只是检查图标是否加载，而不是阴影。如果阴影先加载，则一切都很好。如果图标恰好在阴影之前加载，您将获得未定义的属性。

您必须找到一种方法，仅在加载图标和阴影时才触发大部分功能。

我尝试了像 $("img").load() 这样的 jQuery 选择器，甚至为新创建的图标和阴影分配 ID，以捕获图标和阴影的预加载，但是不成功。最终我将这对 bool 条件放在一起，虽然我无法证明它是万无一失的，但它在十次 Chrome 重新加载中幸存下来。

我让你编写更复杂的代码:)

    return this.each(function () {
        var thisElement = this;
        var mapIcon = new Image();
        var mapIconShadow = new Image();
        //var icons = mapIcon,mapIconShadow;

        mapIcon.src = "http://lab.interactrv.com/Images/mapIcon.png";
        mapIconShadow.src = "http://lab.interactrv.com/Images/mapIconShadow.png";

    var iconLoaded = false;
    var iconShadowLoaded = false;

        mapIcon.onload = function() { iconLoaded = true; if(iconShadowLoaded) { makeMarkerImages(); } };
        mapIconShadow.onload = function() { iconShadowLoaded = true; if(iconLoaded) { makeMarkerImages(); } };

        var makeMarkerImages = function () {

            var image = new google.maps.MarkerImage(mapIcon.src, new google.maps.Size(mapIcon.width, mapIcon.height), new google.maps.Point(0, 0), new google.maps.Point(halfzies(mapIcon.width), halfzies(mapIcon.height)));
        // CONTINUED AS BEFORE