Question

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：我不想使用Gmappanel和No Iframe，因为我想在此页面上添加标记

Answer 1

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

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

抱歉，绝对是错的。添加正文标记，渲染到面板容器Ext.panel.Panel下面的正文，它本身会渲染其项目等等，这看起来你对ext的内部及其工作方式知之甚少。

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

请看一下：

GMapPanelView example 还要查看源代码以查看googleapis插件的位置（如果需要，可以扩展gmap视图加载异步）

GMapPanelView source code

example source

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

Gmap usage, jsfiddle（仅举例;不要以这种方式编写实际代码）

不要害怕看源头！

祝你好运;）

ExtJS HTML加载googlemap失败

1 个答案: