获取http/https协议以匹配maps.google.com的<iframe>

chr*_*ina 23 javascript https google-maps protocols http

我试图使用<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.
Run Code Online (Sandbox Code Playgroud)

由于我的网站是http而不是https,并且地图网址是http,为什么会出现不匹配问题,如何解决此问题以使其匹配?

Jps*_*psy 16

这确实是可嵌入HTML代码的错误,由独立的Google Maps页面创建(maps.google.com - >点击链接链接按钮以获取基于iframe的HTML代码).
正如aSeptik在您的问题评论中所述,可以在此处找到相应的错误报告.

如果您使用Maps API嵌入Google地图,则可以避免该错误.如果您直接在页面中或在嵌入式iframe中使用Maps API,这没有任何区别 - 两种方式都可以正常工作.

以下是我在iframe中使用Maps API的其他地图的示例.

这里是一个例子自己的地图使用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>
Run Code Online (Sandbox Code Playgroud)

为方便起见,我在这里使用了jQuery.


小智 -1

不能说 aSeptik 提到的错误,但如果你想避免 http/https 问题,只需不要将其写在 URL 中。

例如:不要写“ http://maps.google.com ”(这会导致您收到警告),而是写“//maps.google.com”,这将自动采用当前会话方案(http/https)并进行 API 调用。

希望这可以帮助。