0

CraftMap JSを使用して「インタラクティブ マップ」を作成しています。マップ イメージは FireFox と Chrome では問題なくロードされますが、Internet Explorer ではまったく表示されません。

10 から 7 までの IE のすべてのバージョンでこれを試しましたが、マップの画像が読み込まれません。

上記の IE にリンクした CraftMap デモを試してみましたが、問題なく動作します。見逃した明らかなものは何も見えません。あなたの一人が私を助けてくれることを願っています。

私のHTMLマークアップは次のとおりです：

                    <div class="interactive-map">
                    <img src="<?php bloginfo( 'template_url' ); ?>/assets/img/world_map.jpg?23456897" class="imgMap" />
                    <div class="marker" id="uk" data-coords="933, 340">
                        <h3>United Kingdom</h3>
                        <ul>
                            <li>(UK) Ltd - Tel: +44</li>
                        </ul>
                        <a class="map-more" href="#united-kingdom">Find Out More</a>
                    </div><!-- #uk -->
</div>

そして私のJS ....

$(function(){

    $('.interactive-map').craftmap({
        image: {
            width: 1994,
            height: 1303,
            name: 'imgMap' // (string) class name for an image
        },
        map: {
            position: '800 10' // (string) map position after loading - 'X Y', 'center', 'top_left', 'top_right', 'bottom_left', 'bottom_right'
        },
        controls: {
            init: true, // (bool) set true to control a map from any place on the page
            name: 'controls', // (string) class name for controls container
            onClick: function(marker)
            {
            }
        }
    });
});

誰かが私を助けてくれることを願っています.これは私を夢中にさせています..

4

2 に答える 2

1

それが問題かどうかはわかりませんが、すべてのオブジェクトが正しくコーディングされているかどうかを確認してください。例えば：

obj = {
    key1: val1,
    key2: val2,
    key3: val3, //comma after last key-value pair
}

キーと値のペアの後のカンマを参照してください。Chrome、Firefox などでは問題ありませんが、IE ではエラーが発生します。

繰り返しますが、それが問題かどうかはわかりませんが、この問題を確認してください。

于 2013-09-04T08:25:37.593 に答える
0

CSSオーバーライドを少し追加することで、この問題を解決できました。何が起こっていたかというと、Internet Explorer のマップに「高さ = 0」のインライン スタイルが追加されたということです。

そのため、スクリプトのプリローダー セクションに次のコードを追加しました...

preloader: {
                init: true, // (bool) set true to preload an image
                name: 'preloader', // (string) class name for a preload container
                onLoad: function(img, dimensions){
                    $('.imgMap').css('height', '1303px');
                }

私が設定した高さは、Firefox / Chrome でインライン スタイルとして設定された高さと一致していました。

于 2013-09-04T13:17:22.853 に答える