0

我正在使用CraftMap JS来生成“交互式地图”。地图图像在 FireFox 和 Chrome 中加载良好，但在 Internet Explorer 中根本看不到。

我在从 10 到 7 的所有版本的 IE 中都试过这个，但地图的图像只是没有加载。

我已经尝试了 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)
            {
            }
        }
    });
});

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

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 的地图中添加了“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 中设置为内联样式的高度相匹配。

于 2013-09-04T13:17:22.853 回答