Fatal编程技术网
  • google-maps/
  • Google maps ExtJS HTML加载googlemap失败 var layout=Ext.create（'Ext.panel.panel'{ 宽度：window.innerWidth， 高度：window.innerHeight， //标题：'边框布局'，//没有标题为空 布局：“边框”， 项目：[{ 标题：“邮件列表”， 地区：'南'，//地区的位置 xtype:'面板'， 身高：100， split:true，//启用调整大小 可折叠的：是的， 边距：“0 5”， 真的吗 }，树{ html:' init（）； 函数init（）{ 变量googleMapOptions= { 中心：新google.maps.LatLng（53.5267，-1.13330）， 缩放：16， mapTypeId:google.maps.mapTypeId.ROADMAP}； map=new google.maps.map（document.getElementById（“map_canvas”），googleMapOptions）； } ', renderTo:Ext.getBody（） }], renderTo:Ext.getBody（） //在那里获取主体和显示布局 });

Google maps ExtJS HTML加载googlemap失败 var layout=Ext.create（'Ext.panel.panel'{ 宽度：window.innerWidth， 高度：window.innerHeight， //标题：'边框布局'，//没有标题为空 布局：“边框”， 项目：[{ 标题：“邮件列表”， 地区：'南'，//地区的位置 xtype:'面板'， 身高：100， split:true，//启用调整大小 可折叠的：是的， 边距：“0 5”， 真的吗 }，树{ html:' init（）； 函数init（）{ 变量googleMapOptions= { 中心：新google.maps.LatLng（53.5267，-1.13330）， 缩放：16， mapTypeId:google.maps.mapTypeId.ROADMAP}； map=new google.maps.map（document.getElementById（“map_canvas”），googleMapOptions）； } ', renderTo:Ext.getBody（） }], renderTo:Ext.getBody（） //在那里获取主体和显示布局 });

google-maps extjs4

Google maps ExtJS HTML加载googlemap失败 var layout=Ext.create（'Ext.panel.panel'{ 宽度：window.innerWidth， 高度：window.innerHeight， //标题：'边框布局'，//没有标题为空 布局：“边框”， 项目：[{ 标题：“邮件列表”， 地区：'南'，//地区的位置 xtype:'面板'， 身高：100， split:true，//启用调整大小 可折叠的：是的， 边距：“0 5”， 真的吗 }，树{ html:' init（）； 函数init（）{ 变量googleMapOptions= { 中心：新google.maps.LatLng（53.5267，-1.13330）， 缩放：16， mapTypeId:google.maps.mapTypeId.ROADMAP}； map=new google.maps.map（document.getElementById（“map_canvas”），googleMapOptions）； } ', renderTo:Ext.getBody（） }], renderTo:Ext.getBody（） //在那里获取主体和显示布局 });,google-maps,extjs4,Google Maps,Extjs4,但我使用的是工作正常的，当粘贴在ExrJS中时，就无法加载谷歌地图了。为什么? PS：我不想使用Gmappanel和No-Iframe，因为我想在这个页面上添加标记首先，我建议您使用Ext.ux.GMapPanelView基本实现 p/S：我不想使用Gmappanel和NoiFrame，因为我想在这个页面上添加标记 您可以添加标记非常简单，请查看代码： var layout = Ext.create('Ext.panel.Panel', { width: window.innerWidt

但我使用的是工作正常的，当粘贴在ExrJS中时，就无法加载谷歌地图了。为什么?

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

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

p/S：我不想使用Gmappanel和NoiFrame，因为我想在这个页面上添加标记

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

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
});
因此，您甚至可以向其中添加侦听器

您试图在代码段中执行的操作（示例）：

{
html:'
init（）；
函数init（）{
变量googleMapOptions={
中心：新google.maps.LatLng（53.5267，-1.13330），
缩放：16，
mapTypeId:google.maps.mapTypeId.ROADMAP}；
map=new google.maps.map（document.getElementById（“map_canvas”），googleMapOptions）；
}
****
****',
**renderTo:Ext.getBody（）**
}
对不起，完全错了。添加body标记，渲染到panel容器下的body
Ext.panel.panel
，该容器本身会渲染其项目等，这看起来您对Ext的内部结构及其工作原理了解不多

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

请看一下：

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

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

（只是一个示例；不要以这种方式编写实际代码）

不要害怕看源代码

祝你好运；）

控制台中出现了什么错误？@cyripangilian没事，没有错误，你可以尝试在GmapPanel中添加一个InfoWindow，因为GmapPangel InfoWindow无法关闭。你试过了吗？从您发布的代码来看，您正在尝试做与“gmappanel”相同的事情。我不知道如何在您的编码中添加信息窗口，当单击标记时，将弹出信息窗口，并且我的标记是动态的marker@ChinYe“我不知道如何在编码中添加信息窗口”这不是问题的主题。我刚才回答了你的问题。你有GMapPanel的源代码，代码很短。应该注意，面板的
gmap
属性引用了googlemap对象（createMap方法）和其他内容。参考gmap，你可以随心所欲地使用它。但最好扩展GMapPanel并在其中添加所有必需的功能。下面是添加
google.maps.InfoWindow
just simple/stupidHow在MVC中实现的另一个示例的链接？我应该在哪里编写代码 
 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()**
}