2

我在 iframe 中加载 Google 地图时遇到问题。我想做这样的事情，但在 iframe 内。我尝试过不同的方式：

在加载脚本之前尝试调用 showNewMap() 函数。但我收到以下错误：未捕获的类型错误：对象 [对象全局] 没有方法“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);

有什么想法可以解决这个问题吗？

4

3 回答 3

3

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

小提琴：http: //jsfiddle.net/gS7sZ/1/

于 2013-08-12T18:51:24.393 回答
2

问题与您在 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);
于 2013-08-12T15:59:12.677 回答
0

函数 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);
于 2013-08-12T15:59:23.273 回答