Javascript 无法将Google地图集成到选项卡组件中_Javascript_Google Maps_Zk

Javascript 无法将Google地图集成到选项卡组件中

javascript google-maps

Javascript 无法将Google地图集成到选项卡组件中,javascript,google-maps,zk,Javascript,Google Maps,Zk,我正在使用ZK框架。我知道ZK已经有了谷歌地图组件，但我使用的是CE版，所以这个组件对我来说不可用。我尝试在javascript的帮助下将其集成： gmaps.zul <zk> <style> html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } @media p

我正在使用ZK框架。我知道ZK已经有了谷歌地图组件，但我使用的是CE版，所以这个组件对我来说不可用。我尝试在javascript的帮助下将其集成：

gmaps.zul
<zk>
    <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #map_canvas {
       height: 100%;
    }

    @media print {
      html, body {
         height: auto;
      }

      #map_canvas {
         height: 650px;
      }
    }
  </style>
  <html> <![CDATA[
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=uk">
   </script>
   <script type="text/javascript">
    function initialize() {
       var myOptions = {
           zoom: 8,
           center: new google.maps.LatLng(-34.397, 150.644),
           mapTypeId: google.maps.MapTypeId.ROADMAP
       };

       var map = new google.maps.Map(document.getElementById('map_canvas'),
  myOptions);
    }

    function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://maps.googleapis.com/maps/api/js?sensor=false&' + 'callback=initialize';
        document.body.appendChild(script);
    }

    window.onload = loadScript;
    </script>
    <div id="map_canvas">
    </div> 
     ]]></html> TEST TEXT
</zk>

gmaps.zul
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图画布{
身高：100%；
}
@媒体印刷品{
html，正文{
高度：自动；
}
#地图画布{
高度：650px；
}
}
函数初始化（）{
变量myOptions={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map_canvas'），
肌肽）；
}
函数loadScript（）{
var script=document.createElement（'script'）；
script.type='text/javascript'；
script.src=http://maps.googleapis.com/maps/api/js?sensor=false&“+”回调=初始化“；
document.body.appendChild（脚本）；
}
window.onload=loadScript；
]]>测试文本

对我来说，它工作得很好，我可以看到谷歌地图。但实际上我想将其集成到另一个页面的选项卡元素中：

<?page id="main-page"?>
   <zk>
   <window id="wnd" title="Tabs of Content" width="100%" height="100%" border="normal"> 
          <tabbox id="tbox" width="100%">
                <attribute name="onSelect">{
                    Window w = Path.getComponent("//main-page/wnd");
                    if (self.selectedIndex==1) {
                       Include inc = (Include)Path.getComponent("//main-page/wnd/project_tab"+self.selectedIndex);
                       inc.setSrc("gmaps.zul");
                     }
               }</attribute>
                <tabs>
                     <tab id = "tab1label" label="Tab 0"/>
                     <tab id = "tab2label" label="Tab 1"/>
                </tabs>
                <tabpanels>
                     <tabpanel>Test</tabpanel>
                     <tabpanel><include id="project_tab1" src=""/></tabpanel>
                </tabpanels>
             </tabbox>
       </window>
   </zk>


{
窗口w=Path.getComponent（“//主页/wnd”）；
if（self.selectedIndex==1）{
Include inc=（Include）Path.getComponent（“//main page/wnd/project_tab”+self.selectedIndex）；
公司setSrc（“gmaps.zul”）；
}
}
试验

当我打开这个页面并尝试Tab1时，没有谷歌地图。

如何解决这个问题？

您可以尝试zk gmaps 3.0.0.Beta，可在以下网址下载：

问候,

ben

您可以使用Google地图代码创建静态html或jsp页面，然后可以在iframe中加载该页面

这是最好的选择，如果你使用CE版

您甚至可以使用“iframe-map”创建定制的ZK-google-map控件，该控件包含地图操作所需的所有函数，但这需要一些javascript编码

我就是这么做的