【zk开发】zk5.0.3中使用google 地图 v3

由于zk的gmaps2.0.5提供的事件不能满足项目的需求，昨天写了一个电话号码定位的例子，号码是使用爬虫爬过来的，号码地点对

 

 

index.zul页面代码

 

<?xml version="1.0" encoding="utf-8"?>
<?page id="indexPage" title="linkMaps" cacheable="false" language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<?script src="/js/linkMaps.js" type="text/javascript"?>
<?script src="http://maps.google.com/maps/api/js?sensor=false&amp;region=GB" type="text/javascript"?>
<window id="gmapsWin" xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:n="http://www.zkoss.org/2005/zk/native" xmlns="http://www.zkoss.org/2005/zul"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd"
	xmlns:w="http://www.zkoss.org/2005/zk/client" apply="com.xxx.linkMaps.web.zk.controller.GmapsController">
	<image src="/images/32.png"></image>
	纬度
	<textbox id="txtLat" cols="50"></textbox>
	,经度
	<textbox id="txtLng" cols="50"></textbox>
	<textbox id="txtAddress" cols="50"></textbox>
	<button label="搜索" mold="os" forward="onGoogleSearch" />
	<div id="map_canvas" height="700px">
	</div>
</window>

 

 

 

关键js代码

 

 

(function(window) {
	var linkMap = {
		map : false,
		geocoder : false,
		initialize : function() {
			var myLatlng = new google.maps.LatLng(33.10160322191529,
					110.8020810546875);
			var myOptions = {
				zoom : 4,
				center : myLatlng,
				mapTypeId : google.maps.MapTypeId.ROADMAP
			};
			this.map = new google.maps.Map(jq("$map_canvas")[0], myOptions);
			this.geocoder = new google.maps.Geocoder();
			google.maps.event.addListener(this.map, 'bounds_changed',
					function() {
						linkMap.onMapBoundschanged();
					});
			google.maps.event.addListener(this.map, 'center_changed',
					function() {
						linkMap.onMapCenterchanged();
					});
			google.maps.event.addListener(this.map, 'click', function(event) {
				linkMap.onMapclick(event.latLng);
			});
			google.maps.event.addListener(this.map, 'dblclick',
					function(event) {
						linkMap.onMapDblclick(event.latLng);
					});
			google.maps.event.addListener(this.map, 'drag', function() {
				linkMap.onMapDrag();
			});
			google.maps.event.addListener(this.map, 'dragend', function() {
				linkMap.onMapDragend();
			});
			google.maps.event.addListener(this.map, 'dragstart', function() {
				linkMap.onMapDragstart();
			});
			google.maps.event.addListener(this.map, 'idle', function() {
				linkMap.onMapIdle();
			});
			google.maps.event.addListener(this.map, 'maptypeid_changed',
					function() {
						linkMap.onMapTypeIdchanged();
					});
			google.maps.event.addListener(this.map, 'mousemove',
					function(event) {
						linkMap.onMapMousemove(event.latLng);
					});
			google.maps.event.addListener(this.map, 'mouseout',
					function(event) {
						linkMap.onMapMouseout(event.latLng);
					});
			google.maps.event.addListener(this.map, 'mouseover',
					function(event) {
						linkMap.onMapMouseover(event.latLng);
					});
			google.maps.event.addListener(this.map, 'projection_changed',
					function() {
						linkMap.onMapProjectionchanged();
					});
			google.maps.event.addListener(this.map, 'resize', function() {
				linkMap.onMapResize();
			});
			google.maps.event.addListener(this.map, 'rightclick', function(
					event) {
				linkMap.onMapRightclick(event.latLng);
			});
			google.maps.event.addListener(this.map, 'tilesloaded', function() {
				linkMap.onMapTilesloaded();
			});
			google.maps.event.addListener(this.map, 'zoom_changed', function() {
				linkMap.onMapZoomchanged();
			});
		},
		codeAddress : function(phone, address) {
			linkMap.geocoder.geocode( {
				'address' : address
			}, function(results, status) {
				var location = results[0].geometry.location;
				if (status == google.maps.GeocoderStatus.OK) {
					zAu.send(new zk.Event(zk.Widget.$(jq("$gmapsWin")),
							"onCodeAddressSuccessful", [phone,location.lat(),location.lng()]));
					// linkMap.map
					// .setCenter(results[0].geometry.location);
					// var marker = new google.maps.Marker( {
					// map : linkMap.map,
					// position : results[0].geometry.location
					// });
				} else {
					zAu.send(new zk.Event(zk.Widget.$(jq("$gmapsWin")),
							"onCodeAddressFailture", [phone]));
				}
			});
		},

		onMapBoundschanged : function() {
		},
		onMapCenterchanged : function() {
		},
		onMapclick : function(latLng) {

		},
		onMapDblclick : function(latLng) {
		},
		onMapDrag : function() {
		},
		onMapDragend : function() {
		},
		onMapDragstart : function() {
		},
		onMapIdle : function() {
		},
		onMapTypeIdchanged : function() {
		},
		onMapMousemove : function(latLng) {
			jq("$txtLat").attr("value", latLng.lat());
			jq("$txtLng").attr("value", latLng.lng());
		},
		onMapMouseout : function(latLng) {
		},
		onMapMouseover : function(latLng) {
		},
		onMapProjectionchanged : function() {
		},
		onMapResize : function() {
		},
		onMapRightclick : function(latLng) {
		},
		onMapTilesloaded : function() {
		},
		onMapZoomchanged : function() {
		}
	};
	
	//等待zk Engine启动，然后加载地图
	function waitBooted() {
		if (zk.booted) {
			linkMap.initialize();
		} else {
			setTimeout(function() {
				waitBooted();
			}, 50);
		}
	}
	setTimeout(function() {
		waitBooted();
	}, 200);
	window.linkMap = linkMap;
})(window);

 

 

 

后体代码

 

 

public class GmapsController extends GenericForwardComposer {

	/**
	 * 
	 */
	private static final long serialVersionUID = -7539000732062612449L;

	public void onGoogleSearch() {
		String phone = "234234234";
		String address = "美国";
		Clients.evalJavaScript("linkMap.codeAddress('" + phone + "','"
				+ address + "');");
	}

	/**
	 * 当查询成功的时候
	 * 
	 * @param event
	 */
	public void onCodeAddressSuccessful(Event event) {
		Object []o=(Object[])event.getData();
		System.out.println(o[0]);
		System.out.println(o[1]);
		System.out.println(o[2]);
	}

	/**
	 * 当查询失败的时候
	 * 
	 * @param event
	 */
	public void onCodeAddressFailture(Event event) {
		Object []o=(Object[])event.getData();
		System.out.println(o[0]);
	}
}