?? gmap.zul
字號(hào):
<?xml version="1.0" encoding="UTF-8"?><!--gmap.zul{{IS_NOTE Purpose: Description: History: Thu Nov 13 16:07:16 TST 2008, Created by Flyworld}}IS_NOTECopyright (C) 2008 Potix Corporation. All Rights Reserved.{{IS_RIGHT}}IS_RIGHT--><window id="demo" apply="org.zkoss.zkdemo.userguide.DemoWindowComposer"> <html><![CDATA[ <h4>Demo of Google Maps</h4> <p><a href="http://maps.google.com">Google Maps</a> is a popular maps service developed by Google. <a href="javascript:;" onclick="if (!zk.isVisible($e('infos'))) {anima.slideDown($e('infos'));} else {anima.slideUp($e('infos'));}">More..</a></p> <p style="display:none;" id="infos">In this demo, user can enter the new center(latitude and longitude) of the maps and the maps would move to show the new location. User can also drag the maps around to a new location and see the current center of the maps.</p> ]]></html> <separator />
<tabbox width="100%" tabscroll="false">
<tabs>
<tab id="demoView" label="Demo"/>
<tab id="srcView" label="View Source"/>
</tabs>
<tabpanels>
<tabpanel>
<window id="view">
</window>
</tabpanel>
<tabpanel>
<panel>
<panelchildren>
<textbox id="codeView" class="code" rows="20" width="95%">
<attribute name="value"><![CDATA[
<window title="Google Maps"> <div style="border: 1px solid red;margin-top:10px;margin-bottom:20px" if="${empty sessionScope.gmapsKey}"> To use Google Maps for this site, you have to assign a proper key first. Check the source codes of org.zkoss.zkdemo.userguide.MainWindow for details. </div> <iframe src="/userguide/misc/gmaps-ifr.zul" width="560px" height="460px"/> <!-- Note: since the javascript file of Google Maps must be loaded statically, we have to iframe to do it. The following content works only if it is part of the main page <vbox> <gmaps id="mymap" width="500px" height="300px" showSmallCtrl="true"> <attribute name="onMapMove"> mylat.setValue(self.getLat()); mylng.setValue(self.getLng()); </attribute> <attribute name="onMapZoom"> myzoom.setValue(self.getZoom()); </attribute> <attribute name="onMapClick"> Gmarker gmarker = event.getGmarker(); if (gmarker != null) { gmarker.setOpen(true); } </attribute> <ginfo id="myinfo" open="true"> <attribute name="content"> Hello, <a href="http://www.zkoss.org">ZK</a>. </attribute> </ginfo> <gmarker id="mymark" lat="37.4410" lng="-122.1490"> <attribute name="content"> Hello, <a href="http://www.zkoss.org">ZK</a> on top of Gmarker. </attribute> </gmarker> </gmaps> <grid><rows> <row>Latitude: <doublebox id="mylat" value="${mymap.lat}" onChange="mymap.panTo(self.doubleValue(), mymap.getLng())"/></row> <row>Longitude: <doublebox id="mylng" value="${mymap.lng}" onChange="mymap.panTo(mymap.getLat(), self.doubleValue())"/></row> <row>Zoom Level: <intbox id="myzoom" value="${mymap.zoom}" onChange="mymap.setZoom(self.getValue())"/></row> <row>Open Info: <button label="Change" onClick="myinfo.isOpen() ? mymark.setOpen(true) : myinfo.setOpen(true)"/></row> </rows></grid> </vbox> --></window> ]]></attribute>
</textbox>
</panelchildren>
<toolbar mold="panel">
<button id="tryBtn" label="Try me!"/>
<button id="reloadBtn" label="Reload" height="18px"/>
</toolbar>
</panel>
</tabpanel>
</tabpanels>
</tabbox></window>?? 快捷鍵說(shuō)明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -