如何使用Javascript在iframe中加载谷歌地图
How to load a Google Map in an iframe with Javascript?
我在iframe中加载谷歌地图时遇到问题。我想做这样的事,但要在一个iframe里。我尝试过不同的方式:
在加载脚本之前尝试调用showNewMap()函数。但我得到了以下错误:未捕获的类型错误:Object[Object global]没有方法"showNewMap":http://jsfiddle.net/9RE4h/1/
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) { doc = doc.document;}
function showNewMap() {
var mapContainer = doc.createElement('div');
mapContainer.setAttribute('style',"width: 500px; height: 300px");
doc.body.appendChild(mapContainer);
var mapOptions = {
center: new google.maps.LatLng(-35.000009, -58.197645),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapContainer,mapOptions);
}
var script = doc.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&' + 'callback=showNewMap';
doc.getElementsByTagName('head')[0].appendChild(script);
有解决问题的办法吗?
Firefox与Google Crome兼容:
var iframe = document.createElement("iframe");
iframe.onload = function() {
var doc = iframe.contentDocument;
iframe.contentWindow.showNewMap = function() {
var mapContainer = doc.createElement('div');
mapContainer.setAttribute('style',"width: 500px; height: 300px");
doc.body.appendChild(mapContainer);
var mapOptions = {
center: new this.google.maps.LatLng(-35.000009, -58.197645),
zoom: 5,
mapTypeId: this.google.maps.MapTypeId.ROADMAP
}
var map = new this.google.maps.Map(mapContainer,mapOptions);
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&' + 'callback=showNewMap';
iframe.contentDocument.getElementsByTagName('head')[0].appendChild(script);
};
document.body.appendChild(iframe);
Fiddle:http://jsfiddle.net/gS7sZ/1/
问题与JavaScript中的作用域有关。当您定义showNewMap函数时,它会绑定到主窗口对象,但您需要在iFrame中定义它。以下内容应该有效(请参阅:http://jsfiddle.net/4Ret8/):
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) { doc = doc.document;}
iframe.contentWindow.showNewMap = function() {
//debugger;
var mapContainer = doc.createElement('div');
mapContainer.setAttribute('style',"width: 500px; height: 300px");
doc.body.appendChild(mapContainer);
var mapOptions = {
center: new this.google.maps.LatLng(-35.000009, -58.197645),
zoom: 5,
mapTypeId: this.google.maps.MapTypeId.ROADMAP
}
var map = new this.google.maps.Map(mapContainer,mapOptions);
}
var script = doc.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&' + 'callback=showNewMap';
doc.getElementsByTagName('head')[0].appendChild(script);
函数showNewMap()在帧中不可见,您必须在帧中添加函数showNewMap()
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) { doc = doc.document;}
var func = "function showNewMap() { "+
"var mapContainer = document.createElement('div');"+
"mapContainer.setAttribute('style','width: 500px; height: 300px');"+
"document.body.appendChild(mapContainer);"+
"var mapOptions = {"+
" center: new google.maps.LatLng(-35.000009, -58.197645),"+
" zoom: 5,"+
" mapTypeId: google.maps.MapTypeId.ROADMAP"+
"};"+
"var map = new google.maps.Map(mapContainer,mapOptions);"+
"}";
var scriptMap = doc.createElement('script');
scriptMap.type = 'text/javascript';
var newContent = document.createTextNode(func);
scriptMap.appendChild(newContent);
doc.getElementsByTagName('head')[0].appendChild(scriptMap);
var script = doc.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&' +'callback=window.showNewMap';
doc.getElementsByTagName('head')[0].appendChild(script);
相关文章:
- 在Ionic应用程序上使用$.getScript加载谷歌地图Api
- 使用jquery时无法加载谷歌地图
- 谷歌应用程序脚本html服务和加载谷歌地图javascript api V3
- 无法从 .each 循环加载谷歌地图上的两个标记
- Framework7中未加载谷歌地图
- 如何重新加载谷歌地图图层
- Jquery 移动错误消息,当没有互联网连接加载谷歌地图
- 异步加载谷歌地图 V3 时将数据传递给回调
- Jquery移动检查时没有互联网连接显示错误消息,而不是加载谷歌地图
- 在异步加载谷歌地图时处理网络断开连接
- 如何测试一个脚本,用茉莉花加载谷歌地图
- KMZ文件在谷歌地球中加载,但不加载谷歌地图
- 打开浏览器时不会加载谷歌地图
- 异步加载谷歌地图 API
- 如何仅在我的应用 navigator.onLine 时加载谷歌地图 API
- 通过AJAX加载谷歌地图API,控制台错误
- 如何在没有标记内容的情况下加载谷歌地图
- 仅在Rails应用程序中的某些页面上加载谷歌地图脚本
- 如何使用Javascript在iframe中加载谷歌地图
- (懒惰)重构后加载谷歌地图不起作用