为什么谷歌地图不能在一个页面上显示全尺寸?

时间:2017-08-03 作者:user18787

在WordPress页面中输入google地图嵌入如下代码

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d805184.6317849847!2d144.49269473369353!3d-37.97123702210555!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad646b5d2ba4df7%3A0x4045675218ccd90!2sMelbourne+VIC!5e0!3m2!1sen!2sau!4v1501764505542" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
发布后,该部分将消失。

  width="600" height="450" 
所以,地图显示的尺寸非常小,大约是200px X 100px

2 个回复
SO网友:devdarsh

尝试使用css样式

iframe {
  width:100%;
  height:450px;
}
或特定于页面的css

.page iframe {
  width:100%;
  height:450px;
}

SO网友:Luckyfella

有一种方法可以嵌入iframe responsive,这意味着它将占用其容器的全部可用宽度:

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;  // in case of problems add height: auto; after this line
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
现在像这样嵌入iframe:

<div class="embed-container">
    <iframe src="https://www.yourURL.tld" width="560" height="315" frameborder="0"></iframe>
</div>

结束

相关推荐

Create fixed static pages

我在一个主题中有两个重要的静态页面。一个是确认页面(注册新闻稿后),另一个是感谢页面。我在各种功能中使用这些功能,并在主题安装时使用预定义内容创建它们。问题是一些用户倾向于更改slug或页面标题。我目前正在使用get\\u page\\u by\\u title,但一旦标题更改,则无法使用。我有一个退路,用户可以在选项面板中定义哪一个是他的确认页面,但我真的不喜欢这个解决方案。另一个问题是,一旦标题更改,我的页面模板(例如page confirm.php)也不会自动应用,因此用户也必须选择它。Is it