2011-12-15 67 views
0

我正在使用ZK框架。我知道ZK已經有Google地圖組件,但我使用CE版本,所以這個組件對我沒有任何幫助。我試圖將其與javascript的幫助相結合:無法將Google地圖集成到標籤組件

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,沒有谷歌地圖。 這可以如何解決?

回答

0

您可以創建靜態HTML或JSP頁面與谷歌地圖代碼,然後您可以在iframe中加載該頁面。

如果您使用CE版本,這是最佳選擇。

您可以使用該「iframe地圖」創建甚至自定義的ZK谷歌地圖控件,並具有地圖操作所需的所有功能,但這需要一些JavaScript編碼。

這就是我所做的。