谷歌地图嵌入 API 不居中引脚

Question

我正在构建一个使用 Google 的 Mapping API Embed V1.0 的网站，并且我指定的坐标显示正确，但是该点不在映射视图的中心。

问题照片：

iFrame 代码：

<iframe class="sectionMap" width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAGJVo8xnxXbEICl5IuDAbmWIBsE0cFKVQ&amp;q=42.3599,-71.0655&amp;zoom=18&amp;maptype=satellite"></iframe>

CSS：

.sectionMap{
/*
    width: 300px;
    height: 300px;
*/
    display: block;
    position: relative;
    left: 50%;
    margin-left: -150px;
    border-style: solid;
    border-width: 2px;
    box-shadow: 1px 1px 5px 3px #ccc;
}

这是来自网络应用程序的示例页面：

<section id="williamMonroeTrotterHouse" data-role="page" data-theme="a">
    <header data-role="header" data-position="fixed" data-id="appHeader"><a href="#landmarks" data-transition="slide" data-direction="reverse" data-icon="arrow-l" data-rel="back" data-theme="a">Back</a>
        <h1>William Monroe Trotter House</h1>
    </header>
    <div data-role="content">
        <p><span class="sectionTitle">Location: </span>97 Sawyer Ave., Dorchester</p>
        <p><span class="sectionTitle">Description: </span>Home of African-American journalist and Harvard graduate William Monroe Trotter. Trotter publisher The Guardian, and meetings of African-American activists, W. E. B. Du Bois among them, took place at this house.</p>
        <img src="Landmark_Photos/WIlliam_Monroe_Trotter_House.jpg" class="sectionPhoto">
        <br>
        <iframe class="sectionMap" width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAGJVo8xnxXbEICl5IuDAbmWIBsE0cFKVQ&amp;q=42.3127,-71.0624&amp;zoom=18&amp;maptype=satellite"></iframe>
    </div>
</section>

任何想法为什么这不是居中？

PS：我不认为这是一个重复的帖子，因为 Google 最近更新了映射 API，并且之前问题的答案不起作用。

Answer 1

在我的 Safari 版本 (5.1.7) 中，完全由您编写代码的小提琴可以正常工作。哪个版本有问题？我能想象的唯一原因是位置和边距的“棘手”居中。我会尝试margin:0 auto; 进行居中，没有相对位置、顶部和边距。或者使用旧方法：display:inline-block 在带有text-align:center 的 div 中。恕我直言，最后一个是跨浏览器最多的。

.sectionMapWrapper{
width:100%;
text-align:center;
}

.sectionMap{
display: inline-block;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}

编辑：

如果它没有解决问题，请检查您是否有某种库（或您自己的函数）可以使您的 iframe “显示：无”。

如果加载内容时没有布局（显示：无），则 iframe 脚本的大小为 0x0，中心位于 ... 0/x , 0/x。保持显示块直到加载内容，然后您可以使用 display:none 隐藏它。

在类似的情况下，我解决了这个问题，将 iframe 放置在一个 0x0 大小的 div 中，并隐藏了溢出（在样式属性处）。当确定 iframe 内容已加载时，会触发将 iframe 显示设置为 none 并删除包装器 div 样式属性的函数。 （或类似的，取决于您需要的其他行为）。希望对您有所帮助。