Question

我正在使用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>

就我而言，它工作正常，我可以看到谷歌地图。但实际上我想将它集成到另一个页面的Tab元素中：

<?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>

当我打开此页面并尝试Tab1时，没有Google地图。如何解决这个问题？

Answer 1

你可以试试zk gmaps 3.0.0.Beta，它可以在zkgmapsz downloads list

下载

此致

贲

Answer 2

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

如果您使用CE版本，这是最佳选择。

您甚至可以使用“iframe地图”创建自定义ZK谷歌地图控件，其中包含地图操作所需的所有功能，但这需要一些javascript编码。

这就是我所做的。

无法将Google地图集成到标签组件中

2 个答案: