谷歌地图嵌入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：我不相信这是一个重复的帖子，因为谷歌最近更新了映射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中，并且隐藏了溢出（在style属性中）。当确定加载iframe内容时，触发一个将iframe显示设置为none的函数，并删除包装器div样式属性。 （或类似的，取决于您需要的额外行为）。希望它有所帮助。