1 
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 中时，无法加载谷歌地图。为什么？

PS：我不想使用 Gmpanel 和 No Iframe，因为我想在这个页面上添加标记

4

1 回答 1

3

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

P/S：我不想使用 Gmpanel 和 No 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()**
}

对不起，绝对是错误的。添加body标签，渲染到位于面板容器下的body Ext.panel.Panel，它本身会渲染它的项目等等，这看起来你对ext的内部结构和它是如何工作的了解不多。

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

看看：

GMapPanelView 示例 还查看源代码只是为了查看 googleapis 的插入位置（如果需要，您可以扩展 gmap 视图以异步加载它）

GMapPanelView 源代码

示例源

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

Gmap 用法，jsfiddle（只是一个例子；不要这样写实际代码）

不要害怕看源头！

祝你好运 ;）

于 2013-04-25T09:21:07.473 回答