Question

我正在使用CraftMap JS来制作“互动地图”。地图图片可以很好地加载到FireFox和Chrome中，但在Internet Explorer中看不到所有内容。

我已经在所有版本的IE中尝试了这个，从10到7，并且Map的图像不会加载。

我已经尝试了CraftMap演示，我在IE中链接到上面，它工作正常。我只是看不出任何明显错过的东西。所以我希望你们中的一个可以帮助我。

我的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)
            {
            }
        }
    });
});

希望有人可以帮助我，这让我发疯了......

Answer 1

我不知道这是否是问题，但检查所有对象是否都已正确编码。例如：

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

在键值对后看到逗号？这不会导致Chrome，Firefox等出现任何问题，但会在IE中引发错误。

同样，只是一个建议，不确定是否是问题，但请检查此问题。

Answer 2

我设法通过添加一些CSS覆盖来解决这个问题。发生的事情是在Internet Explorer中向地图添加了“height = 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中设置为内联样式的高度相匹配。

CraftMap JS - 不在IE中加载地图图像

2 个答案: