获取HTTP / HTTPS协议,以配合 对于maps.google.com(Getting

2019-07-04 02:55发布

我试图使用<iframe>包括谷歌地图,然而控制台抛出由于几个错误的不匹配,但没有明显的不匹配,所以我假设它必须是在侧面的函数/进程谷歌地图。

具体而言与maps.google.com,似乎存在改变到脚本的IFRAME,根据此 。

在控制台中的错误是这样的:(我正在在页面加载至少30个错误)

Unsafe JavaScript attempt to access frame with URL http://www.developer.host.com/ from
frame with URL https://maps.google.com/maps/msmsa=0&msid=
212043342089249462794.00048cfeb10fb9d85b995&ie=UTF8&t=
m&ll=35.234403,-80.822296&spn=0.392595,0.137329&z=10&output=embed. 

The frame requesting access has a protocol of 'https', the frame being
accessed has a protocol of 'http'. Protocols must match.

因为我的网站是http和没有使用https,而将地图网址是http,为什么是不匹配的现象发生,以及如何解决这个问题,以使它们相匹配?

Answer 1:

这真的是嵌入HTML代码中的错误,由独立的谷歌地图页面中创建( maps.google.com - >点击链接链按钮获得基于iframe的HTML代码)。
正如在评论你的问题说的aSeptik,相应的错误报告可以在这里找到 。

您可避免的错误,如果你使用Google Maps API嵌入谷歌地图。 它确实没有什么区别,如果你直接在网页或内嵌入的iframe中使用的地图API - 左右逢源做工精细。

这里是一个例子 ,其中我已经使用iFrame中的地图API一些其它地图。

这里是一个例子使用Google Maps API 自己的地图 -右边的页面中嵌入。

需要Maps API的额外的代码其实很小:

<html>
<head>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type='text/javascript'>
        $(function(){
            var myOptions = {
                center: new google.maps.LatLng(35.201867,-80.836029),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            gMap = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

            var kmlLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?ie=UTF8&t=m&authuser=0&msa=0&output=kml&msid=212043342089249462794.00048cfeb10fb9d85b995');
            kmlLayer.setMap(gMap);
        });
    </script>
</head>
<body>
    <div id="map_canvas" style="width: 400px; height: 400px;"></div>
</body>

我在这里用的jQuery为了方便。



Answer 2:

添加属性crossorigin="anonymous"</iframe>解决问题的方法:

例:

 <iframe crossorigin="anonymous" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10005.660822865373!2d6.3855055!3d51.1745698!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbc2d05dc3af26862!2sBORUSSIA-PARK!5e0!3m2!1sen!2suk!4v1448289882279" width="400" height="300" frameborder="0" allowfullscreen> </iframe> 



Answer 3:

不能说有关aSeptik提到的错误,但如果你想避免HTTP / HTTPS的问题不只是它的URL写。

例如:除了写作“的http://maps.google.com ”,这将导致您收到警告,写“//maps.google.com”,这将自动把当前会话方案(HTTP / HTTPS)和使API调用。

希望这可以帮助。



文章来源: Getting http/https protocols to match with