将 Google Map iFRAME 放置在 HTML 表格行的页面中心

Posted 2023-03-05

【中文标题】将 Google Map iFRAME 放置在 HTML 表格行的页面中心

【英文标题】：Placing Google Map iFRAM to center of page in HTLM table row

【发布时间】：2021-02-15 21:16:43

【问题描述】：

我正在使用 angular.js 并将 iram 放在我的 html 表格行中，它没有出现在页面的中心。

我正在使用此代码

 <tr>
        <td>
         
         <iframe id="myIframe"
            [src]="'https://maps.google.com/maps?q='+rfq.latitude+','+rfq.longitude+'&hl=es;z=18&amp;output=embed' | safe"
             
             
            frameborder="0"
       ></iframe>
        </td>
      </tr>

我怎样才能把这个地图全权放在页面的中心

【参考方案1】：

我不知道如何以角度添加 css，但您可以简单地使用 position: absolute 将 iframe 居中。 您还可以从 iframe 中删除 height 和 width 编辑代码 我已经看到了您的代码，您在添加 width 和 height 以及 style 标记之外的其他 css 属性时做错了什么。如果你看看我的代码你就会明白。

<iframe id="myIframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30704255.110777132!2d64.3828365886956!3d20.047174681973626!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1604400347555!5m2!1sen!2sin" width="600" height="450" frameborder="0" style="width: 100%; position: absolute; height: 300px;left: 50%;top: 50%;transform: translate(-50%,-50%)"  allowfullscreen="" aria-hidden="false" tabindex="0" ></iframe>

Here's the link of codesandbox

如果它不适合你，请告诉我。

【讨论】：

它不起作用

请问您是如何将谷歌地图嵌入到您的页面的？您是否尝试将 css 添加到 iframe 标记？最后..你有前端开发经验吗？谢谢

我正在使用此代码 我在前端开发方面没有太多经验，我是后端、移动、应用程序和网络应用程序开发人员

@ShoaibAnwar 对不起，我没有任何支持经验，但经过一些研究，我确实解决了你的问题，看看我编辑的代码。谢谢

感谢它的全宽，但它覆盖了我在页面上的另一行 i.ibb.co/RbrHgyF/Screen-Shot-2020-11-04-at-9-59-33-AM.png