我试图使用<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,为什么是不匹配的现象发生,以及如何解决这个问题,以使它们相匹配?
这真的是嵌入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为了方便。
添加属性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>
不能说有关aSeptik提到的错误,但如果你想避免HTTP / HTTPS的问题不只是它的URL写。
例如:除了写作“的http://maps.google.com ”,这将导致您收到警告,写“//maps.google.com”,这将自动把当前会话方案(HTTP / HTTPS)和使API调用。
希望这可以帮助。