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

Can`t integrate Google Maps into Tab component

本文关键字：标签 组件 集成 谷歌地图      更新时间：2023-09-26

我正在使用ZK框架。我知道ZK已经有Google Maps组件，但我使用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时，没有谷歌地图。如何解决这个问题?

你可以试试zk gmaps 3.0.0.Beta，可以在zkgmapsz下载列表

下载。

问候,本

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

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

你甚至可以用"iframe map"创建自定义的ZK谷歌地图控件，包含地图操作所需的所有功能，但这将需要一些javascript编码。

相关文章：