gmap.zul

来自「ZK是一个Ajax Java Web框架」· ZUL 代码 · 共 105 行

ZUL
105 行
字号 
<?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="&#36;{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, &lt;a href="http://www.zkoss.org"&gt;ZK&lt;/a&gt;.			</attribute>		</ginfo>				<gmarker id="mymark" lat="37.4410" lng="-122.1490">			<attribute name="content">				Hello, &lt;a href="http://www.zkoss.org"&gt;ZK&lt;/a&gt; on top of Gmarker.			</attribute>		</gmarker>	</gmaps>	<grid><rows>		<row>Latitude: <doublebox id="mylat" value="&#36;{mymap.lat}" onChange="mymap.panTo(self.doubleValue(), mymap.getLng())"/></row>		<row>Longitude: <doublebox id="mylng" value="&#36;{mymap.lng}" onChange="mymap.panTo(mymap.getLat(), self.doubleValue())"/></row>		<row>Zoom Level: <intbox id="myzoom" value="&#36;{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>

gmap.zul - 源码说明

本页面展示了「ZK是一个Ajax Java Web框架」中的 gmap.zul 源码文件，采用 ZUL 编程语言编写，共 105 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与Ajax相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?