ExtJS HTML加载谷歌地图失败

var layout = Ext.create('Ext.panel.Panel', { 
    width: window.innerWidth, 
    height: window.innerHeight, 
    // title: 'Border Layout', //no title will be blank 
    layout: 'border', 
    items: [{ 
     title: 'Message List', 
     region: 'south', // position for region 
     xtype: 'panel', 
     height: 100, 
     split: true, // enable resizing 
     collapsible: true, 
     margins: '0 5 5 5', 
     collapsed: true 
    }, tree, { 
     html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js"> 
       </script> 
       <script type="text/javascript"> 
       init(); 
       function init() { 
       var googleMapOptions = 
       { 
       center: new google.maps.LatLng(53.5267, -1.13330), 
       zoom: 16, 
       mapTypeId: google.maps.MapTypeId.ROADMAP}; 
       map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions); 
       }</script> 
       <body> 
       <div id="map_canvas" style="width:600px; height:400px"></div> 
       </body>', 
     renderTo: Ext.getBody() 
    }], 
    renderTo: Ext.getBody() 
    // get the body and display Layout at there 
});

但我使用http://jsfiddle.net/anthor/ufTpN/工作得很好，当粘贴在ExrJS，然后无法加载谷歌地图。为什么？ExtJS HTML加载谷歌地图失败

PS：我不想用Gmappanel并没有IFRAME，因为我想这个网页

来源

2013-04-22 John Walker

您在控制台中遇到什么错误？ – 2013-04-24 14:26:32

@CyrilPangilinan什么都没有，没有错误 – 2013-04-26 15:49:18

首先对加标记，我建议你使用Ext.ux.GMapPanelView基本实现。

P/S：我不希望使用Gmappanel并没有IFRAME，因为我想添加标记此页面

您可以添加标记非常简单的，看看代码：

addMarker: function(marker) { 
    marker = Ext.apply({ 
     map: this.gmap 
    }, marker); 

    if (!marker.position) { 
     marker.position = new google.maps.LatLng(marker.lat, marker.lng); 
    } 
    var o = new google.maps.Marker(marker); 
    Ext.Object.each(marker.listeners, function(name, fn){ 
     google.maps.event.addListener(o, name, fn);  
    }); 
    return o; 
}

所以你甚至可以添加监听器。

你正在尝试中的代码片段（例如）做：

{ 
    html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js"></script> 

    <script type="text/javascript"> 
    init(); 

    function init() { 
    var googleMapOptions = { 
     center: new google.maps.LatLng(53.5267, -1.13330), 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP}; 
     map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions); 
    } 
    </script> 
    **<body>** 
    <div id="map_canvas" style="width:600px; height:400px"></div> 
    **</body>**', 

**renderTo: Ext.getBody()** 
}

对不起，绝对是错误的。添加身体标记，渲染到面板容器Ext.panel.Panel下的身体，该面板容器本身呈现其物品等，这看起来对于分机内部以及它的工作原理知之甚少。

您正在尝试做类似的事情，来自sencha的人建议通过基本的，非常简单的ux实现来使用。你可以进一步扩展它。

只要看一看：

GMapPanelView example 也看看源正好看到googleapis被堵塞（可以延长GMAP视图加载，如果你想异步）

GMapPanelView source code

example source

非常简单示例带有布局边框，您已经使用过。在西部地区你可以找到添加按钮，按下它来添加标记。

Gmap usage, jsfiddle（只是一个例子，不写实际的代码这样）

不要害怕看的源泉！

祝您好运;）

来源

2013-04-25 09:21:07 babinik

问题是完全看不到任何googlemap面板 – 2013-04-26 15:45:35

，你可以尝试在GmapPanel中添加InfoWindow，因为GMapPanel infowindow不能关闭 – 2013-04-26 15:48:50

你有没有试过http：// jsfiddle .net/nbabinski/r8Sga/3 /？来自您发布的代码，您尝试执行与“gmappanel”相同的操作。 – babinik 2013-04-26 16:06:57

ExtJS HTML加载谷歌地图失败

回答

相关问题