【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"), 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.geometry.location;if (status == google.maps.GeocoderStatus.OK) {zAu.send(new zk.Event(zk.Widget.$(jq("$gmapsWin")),"onCodeAddressSuccessful", ));// linkMap.map// .setCenter(results.geometry.location);// var marker = new google.maps.Marker( {// map : linkMap.map,// position : results.geometry.location// });} else {zAu.send(new zk.Event(zk.Widget.$(jq("$gmapsWin")),"onCodeAddressFailture", ));}});},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);System.out.println(o);System.out.println(o);}/** * 当查询失败的时候 ** @param event */public void onCodeAddressFailture(Event event) {Object []o=(Object[])event.getData();System.out.println(o);}}
页:
[1]