Javascript 如何快速响应并以谷歌地图为中心
我正在尝试嵌入尺寸为960x300的谷歌地图,并始终将标记点放在中间。这是我的密码。它反应灵敏,但大小不合适,当我最小化标记的地址时,它没有居中。我该怎么做Javascript 如何快速响应并以谷歌地图为中心,javascript,html,google-maps,Javascript,Html,Google Maps,我正在尝试嵌入尺寸为960x300的谷歌地图,并始终将标记点放在中间。这是我的密码。它反应灵敏,但大小不合适,当我最小化标记的地址时,它没有居中。我该怎么做 <style> .google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .google-maps iframe {
<style>
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.gbox{
width:960px;
height:300px;
}
</style>
<!DOCTYPE html>
<html>
<body>
<h1>My Map</h1>
<p>My first paragraph.</p>
<div class="google-maps">
<div class="gbox">
<iframe src="https://www.google.com/maps/d/embed?mid=1XgV0prYhOa2ojHCt-7VcYbLaXnzIICKP" width="640" height="480"></iframe></div></div>
</body>
</html>
.谷歌地图{
位置:相对位置;
垫底:75%;
身高:0;
溢出:隐藏;
}
.google地图iframe{
位置:绝对位置;
排名:0;
左:0;
宽度:100%!重要;
身高:100%!重要;
}
.gbox{
宽度:960px;
高度:300px;
}
我的地图
我的第一段
请更新此代码
.gbox{
width:960px;
height:300px;
margin: auto;
text-align: center;
}
iframe{
width: 100%;
}
@media(max-width:991px){
.gbox{
width:100% !important;
height:auto;
}
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
}
请检查此解决方案-感谢您的快速回复!如何在顶部隐藏此蓝色标题,我尝试了此操作,但对iframe{width:100%;top:-45px;border:none;}.gbox{overflow:hidden;}.gbox iframe{position:relative;top:-56px;border:0px;}