2

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

我正在尝试在网页中嵌入谷歌地图 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>
4

3 回答 3

2

感谢我的一位同事敏锐而富有洞察力的眼光，我们发现了这个问题。

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

调用 IFRAME 内容时，google 会将 IFRAME 内容重定向到相同的 URL，但带有?wmode=transparent附加。

浏览器不允许多个“？” 在一个 url 中，所以它中止了这个动作。

修理：

使用与 Google 地图生成的 URL 相同的 URL，但只需附加以下内容：

&amp;wmode=transparent
于 2012-11-13T11:02:44.097 回答
1

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

你能显示正在渲染地图的 MVC 视图的片段吗？

于 2012-11-12T14:04:48.610 回答
0

我无法在网络上获得任何各种建议来将谷歌地图链接嵌入到 iframe 中。

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

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

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

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

<?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;

?>

于 2015-11-20T18:23:07.857 回答