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加載谷歌地圖失敗

回答

相關問題