我正在使用jVectormaps创建一个简单的网站。我有一张欧洲地图,我想把它放在屏幕的右边。地图的高度为100%,因此只要用户调整窗口大小即可缩放。但是问题是我的地图居中,无法找到将其定位在我想要的任何位置的方法。

当前代码:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script src="jquery-jvectormap-1.2.2.min.js"></script>
    <script src="jquery-jvectormap-world-mill-en.js"></script>
    <script src="jquery-jvectormap-europe-mill-en.js"></script>
</head>
<body>
<div id="map"></div>
    <script>
        $(function (){
            $('#map').vectorMap({
                map: 'europe_mill_en',
                backgroundColor: 'transparent',
                zoomOnScroll: false,
                regionStyle: {
                    initial: {
                        fill: 'red'
                    },
                    hover: {
                        fill: 'yellow'
                    }
                }
            });
        });
    </script>
</body>
</html>


CSS:

html, body {
    height: 100%;
}

#map {
    height: 100%;
}


我尝试使用display:block和float:对,但这似乎不起作用。我在网站上提供的文档中找不到任何帮助。

有什么建议吗?

提前Thx

最佳答案

似乎它与HTML / CSS而不是jVectorMap有更多关系,但是无论如何,您可以尝试将地图包装在另一个div中并将该div的内容向右对齐:

.wrapper {
    text-align: right;
}

<div class="wrapper">
    <div id="map"></div>
</div>

关于jquery - jVectorMaps定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25265222/

10-12 03:42