📄 gmap.zul
字号:
<?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>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -