Question

我似乎无法让这个工作，而我过去一直这样做，成功......

我正在尝试在网页中嵌入Google Maps iframe。 iframe将无法加载，显示错误消息，说：

Chrome，在控制台中：拒绝显示文档，因为X-Frame-Options禁止显示。

IE9，在页面上：此内容无法在框架中显示

我采取的步骤是：

转到浏览器中的谷歌地图
去我想要嵌入的地方
点击链接图标
复制粘贴在“粘贴HTML以嵌入网站”标签下显示的链接。

我正在使用ASP.NET MVC4，在IIS Express中本地运行，但在IIS7中的服务器上也是如此。

奇怪的是，当我只是创建一个本地HTML文件并从文件系统打开它时，我没有问题。

在jsfiddle中粘贴代码时，它似乎确实有效。

我是否需要配置IIS或在我的标题中添加内容，或类似的内容？

HTML代码段

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.be/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Kortrijk,+Belgium&amp;aq=0&amp;oq=kortrijk,+bel&amp;sll=50.802805,3.279785&amp;sspn=0.351067,0.617294&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Kortrijk,+West+Flanders,+Vlaams+Gewest&amp;ll=50.802897,3.280106&amp;spn=0.350496,0.617294&amp;z=11&amp;iwloc=A&amp;output=embed"></iframe>

Answer 1

感谢我的同事敏锐而富有洞察力的眼睛，我们找到了这个问题。

首先，它似乎只出现在比利时地图http://maps.google.be上，（显然是afaik），而不是http://maps.google.com上。

在调用IFRAME内容时，Google会将IFRAME内容重定向到同一网址，但附加?wmode=transparent。

浏览器不允许多个'？'在网址中，所以它会中止操作。

修复：

使用Google地图生成的相同网址，但只需添加以下内容：

&amp;wmode=transparent

Answer 2

你在iframe源中肯定有&output=embed querystring参数吗？如果您不包含该内容，那么Google将不会发送正确的X-Frame-Options响应标头，您将收到您所描述的错误。

您能否显示正在呈现地图的MVC视图的片段？

Answer 3

我无法在网络上获得任何有关在iframe中嵌入谷歌地图链接的建议。

我最终使用谷歌地图API，通过填写以下框来生成初始代码：

http://www.map-embed.com/

并修改结果代码以符合我的目的。

您可以使用上面的链接为您自己的地图生成代码，然后可选地使用我的代码，将上述网站生成的经度和纬度复制到我的代码中。您也可以将自己的html插入＆＃34;内容＆＃34;以下，与上述网站产生的内容无关。

<?php

// IE won't work with percentage height and FF won't work with em units.
// Simple code here assumes if  browser isn't IE, then is FF; 
// And I don't care about other browsers.
//

$height =  "$browser" == 'ie' ? '25em' : '99%' ;

$width  =  "$browser" == 'ie' ? '99%'  : '99%' ;

echo <<<XXXEODXXX

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>

  <div                    style="height:$height; width:$width; overflow:hidden;">

    <div id="gmap_canvas" style="height:$height; width:$width;">

    </div>

    <style>

      #gmap_canvas 

        img

        {
          max-width:none!important; 
          background:none!important
        } 

    </style>

  </div>

  <script type="text/javascript">

    google.maps.event.addDomListener               ( window, 'load', init_map );

    function init_map ()

      { var myOptions = { zoom:12, center:new google.maps.LatLng ( 41.1889495, -104.1781593 ), mapTypeId:google.maps.MapTypeId.ROADMAP };

        map           = new google.maps.Map        ( document.getElementById ( "gmap_canvas" ), myOptions );

        marker        = new google.maps.Marker     ( {map: map, position: new google.maps.LatLng( 41.1889495, -104.1781593 ) } );

        infowindow    = new google.maps.InfoWindow ( { content:"<b>Biz Name</b><br/>Biz Street Address<br/>Biz City, State Zip<br/>Biz Phone" } );

        google.maps.event.addListener              ( marker, "click", function () { infowindow.open ( map, marker ); } );

        infowindow.open                            ( map, marker );
      }

  </script>

XXXEODXXX;

＆GT;

嵌入Google地图IFRAME

3 个答案: