我正在使用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/