3

よろしくお願いします。数日前から髪を抜いてきました。私はjQueryGoogleマッププラグインを作成しようとしています。これは、他の多くのことを超えて、ユーザーがカスタムアイコンとアイコンシャドウへのパスを指定できるようにします。これにより、画像の寸法を把握して地図上に配置できるようになります。IE9とChromeの特定のページの更新を除いて、すべてが正常に機能しています。アイコンが1つだけ表示され、キャッチされないエラーが発生します。INVALID_STATE_ERR：DOM例外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 () {

しかし、私は過去3日間このコードで遊んだことがあり、理解できないようです。これが私のテストページです。また、どんな助けでも大歓迎です：http: //lab.interactrv.com/preloadTest.aspx

ありがとう。

4

1 に答える 1

0

問題は次の行に起因しているようです。

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、実際にはアイコンがロードされているかどうかだけをチェックしており、シャドウはチェックしていません。影が最初に読み込まれる場合、すべてが良好です。アイコンがシャドウの前にロードされると、未定義のプロパティが取得されます。

アイコンとシャドウの両方がロードされている場合にのみ、関数の大部分をトリガーする方法を見つける必要があります。

のようなjQueryセレクターを試し$("img").load()、新しく作成したアイコンとシャドウにIDを割り当てて、アイコンとシャドウの両方のプリロードをキャプチャしようとしましたが、失敗しました。最終的に、このブール条件のペアをまとめました。これが防弾であることを証明することはできませんが、Chromeの10回のリロードに耐えました。

より洗練されたコードを書くのはあなたに任せます:)

    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
于 2012-07-08T15:01:10.123 に答える