Extjs4.2添加谷歌地图.docxVIP

Extjs4.2添加谷歌地图效果图(1)简单标注(2)复杂标注代码Test.jsp%@pagelanguage=javacontentType=text/html; charset=UTF-8pageEncoding=UTF-8%!DOCTYPEHTMLhtmlheadmetacharset=utf-8title/title!-- EXT 样式文件 --linkrel=stylesheettype=text/cssid=extThemehref=${pageContext.request.contextPath}/js/extjs/resources/css/ext-all.css/link!-- EXT 核心文件 --scripttype=text/javascriptcharset=UTF-8src=${pageContext.request.contextPath}/js/extjs/ext-all-debug.js/script!-- EXT 国际化文件 --scripttype=text/javascriptcharset=UTF-8src=${pageContext.request.contextPath}/js/extjs/locale/ext-lang-zh_CN.js/script!-- 谷歌地图 --scripttype=text/javascriptsrc=/maps/api/js?sensor=falselanguage=zh-CN/script/headbodyscripttype=text/javascriptExt.create(Ext.ux.GMapPanel,{renderTo : Ext.getBody(),height : 600,widht : 400,title : Extjs4添加谷歌地图,layout : fit});/script/body/htmlGMapPanel.js这个文件在extjs源代码中已存在，这里我根据个人需要做了调整。/** * @author Shea Frederick */var gmappanel_markers = [];Ext.define(Ext.ux.GMapPanel, { extend: Ext.panel.Panel, alias: widget.gmappanel,//视图别名 requires: [Ext.window.MessageBox], initComponent : function(){ Ext.applyIf(this,{ plain: true, gmapType: map, border: false }); this.callParent(); }, afterFirstLayout : function(){var center = new google.maps.LatLng(32.00, 112.12);//纬度,经度this.createMap(center);//创建谷歌地图 }, afterComponentLayout : function(w, h){ this.callParent(arguments); this.redraw(); }, /** * 创建谷歌地图 * */ createMap: function(center, marker) {//基础参数 var options = Ext.apply({}, this.mapOptions); options = Ext.applyIf(options, { zoom : 4, //缩放级别可以使用 0（最低缩放级别，在地图上可以看到整个世界）到 19（最高缩放级别，可以看到独立建筑物）之间的缩放级别 center: center, mapTypeId: google.maps.MapTypeId.ROADMAP,//ROADMAP:显示谷歌默认的普通二维图块;SATELLITE:显示谷歌地球卫星图像;HYBRID:混合显示普通视图和卫星视图;TERRAIN:地形图 scaleControl : false,//比例尺 mapTypeControl : false,//地图型控制 draggableCursor : pointer,//手型 dra