- 浏览: 40471 次
- 性别:
- 来自: 广州
文章分类
最新评论
首先引入JS
其中GMapPanel.js是extjs中自带的,代码是
显示google map的代码是
在地图中添加标记,并将经纬度读取到文本框中
设置地图中的标记位置
<script src="../ext4/examples/ux/GMapPanel.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
其中GMapPanel.js是extjs中自带的,代码是
/** * @author Shea Frederick */ 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 = this.center; this.callParent(); if (center) { if (center.geoCodeAddr) { this.lookupCode(center.geoCodeAddr, center.marker); } else { this.createMap(center); } } else { Ext.Error.raise('center is required'); } }, createMap: function(center, marker) { var options = Ext.apply({}, this.mapOptions); options = Ext.applyIf(options, { zoom: 14, center: center, mapTypeId: google.maps.MapTypeId.HYBRID }); this.gmap = new google.maps.Map(this.body.dom, options); if (marker) { this.addMarker(Ext.applyIf(marker, { position: center })); } Ext.each(this.markers, this.addMarker, this); this.fireEvent('mapready', this, this.gmap); }, addMarker: function(marker) { marker = Ext.apply({ map: this.gmap }, marker); if (!marker.position) { marker.position = new google.maps.LatLng(marker.lat, marker.lng); } var o = new google.maps.Marker(marker); Ext.Object.each(marker.listeners, function(name, fn){ google.maps.event.addListener(o, name, fn); }); return o; }, lookupCode : function(addr, marker) { this.geocoder = new google.maps.Geocoder(); this.geocoder.geocode({ address: addr }, Ext.Function.bind(this.onLookupComplete, this, [marker], true)); }, onLookupComplete: function(data, response, marker){ if (response != 'OK') { Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"'); return; } this.createMap(data[0].geometry.location, marker); }, afterComponentLayout : function(w, h){ this.callParent(arguments); this.redraw(); }, redraw: function(){ var map = this.gmap; if (map) { google.maps.event.trigger(map, 'resize'); } } });
显示google map的代码是
var mapOptions = { zoom: 7, //缩放级别 可以使用 0(最低缩放级别,在地图上可以看到整个世界)到 19(最高缩放级别,可以看到独立建筑物)之间的缩放级别 center: new google.maps.LatLng(23, 114), //将地图的中心设置为指定的地理点 mapTypeId: google.maps.MapTypeId.ROADMAP, //ROADMAP - 默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图 scaleControl: true, //比例尺 mapTypeControl: true }; var mapPanel = Ext.create('Ext.ux.GMapPanel',{ title:'Google Map', name:'pic', height:500, align:'center', width:this.mapWidth, mapOptions:mapOptions }); var items = [ container,mapPanel ]; var formPanel = Ext.create('Ext.form.Panel',{ layout:'form', buttonAlign:'center', bodyStyle: 'background:white; padding:10px;', labelAlign:'right', border:false, items:items, buttons:[{text:'保存',iconCls:'save',name:'save',parent:this}, {text:'关闭',iconCls:'cancel',parent:this,handler:function(){ window.AddAdWindow.hide(); var form = this.up('form').getForm(); }}] });
在地图中添加标记,并将经纬度读取到文本框中
registerAction:function(){ var me = this; var map = me.down('gmappanel').gmap; if(map){ if(!this.marker){ this.marker = new google.maps.Marker({ position: map.getCenter(), map: map, draggable: true, title: "position" }); var marker = this.marker; google.maps.event.addListener(marker, "dragend", function(event) { var latLng = event.latLng; var picField = me.down('textfield[name=pic]'); if(picField){ picField.setValue(latLng.lat()+":"+latLng.lng()) } console.log(latLng.lat()+":"+latLng.lng()+":"+map.getZoom()); }); } } }
设置地图中的标记位置
this.marker.setPosition(new google.maps.LatLng(x, y)); this.down('gmappanel').gmap.setCenter(new google.maps.LatLng(x, y));
发表评论
-
EXTJS4下拉选择树
2013-11-26 00:20 460extjs4下拉选择树,代码 ... -
EXTJS4 Form表单中Combox取值与设置值问题
2013-11-25 21:54 2032extjs中combobox取值会取到显示值,取不到value ... -
javascript split用法
2013-11-21 22:17 0var array = picValue.split(':') ... -
extjs4与FCKeditor整合
2013-11-19 23:25 919EXTJS4与FCKeditor整合: 1.自定义C ... -
ext工具栏分隔组件
2013-09-23 09:31 433工具栏组件有 ----------------------- ... -
ckeditor在EXTJS4.0里窗口被遮住的解决办法
2013-09-04 17:40 427Ext.WindowManager.s ... -
EXTJS CheckboxGroup重写setValue与getValue方法
2013-08-21 10:20 1290取到的值是:"1,2"这种形式 var ... -
JS引入时注意事项
2013-06-14 21:12 0引入EXTJS的JS文件时应该要用下面的写法 &l ... -
关于ext.from.BasicForm的errorReader
2010-12-09 10:36 1084由于公司的FORM提交都是返回JSON数据,现在有一个FORM ...
相关推荐
该实例实现google map和ExtJs结合开发,实现图层管理、图层可见性控制、图层要素详细信息查看等功能。
这几个月以来自己做extjs4开发整理下来的一些技术要点
基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子
Extjs 调用google map,标记坐标位置等函数
Extjs4的demo 很不错的例子
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
包含各种类型的extjs小图标,Extjs4小图标
我很自豪能代表Sencha和ExtJS团队和大家成功的分享了ExtJS 4的预览版、3个beta版和今天发布的正式版等5个版本。 ExtJS 4从创建之初,就以最全面现代化为目标,它采用了改进的架构和加入了许多新的特性,从而使你可以...
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
extjs4 中文 API
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
ExtJs 4 API 中文
在Extjs4应用中使用Ext.Loader ======================================= 11条jquery常用技巧和方法整理列表 8个超棒的学习jQuery的网站 JQuery 1.5 getJSON 的使用 JQuery AJAX提交中文乱码的解决方案 Jquery css...
Extjs4.2添加谷歌地图,实现地图标注,定位等功能。
就是extjs4里面,想给grid里面一格中,文字后面加个小图标。 因为俺们项目就只是文字+图标,所以俺就没有复写Actioncolumn,而是从Column下面继承了一下。。 包含自定义插件源码、效果图等等。
用extjs4 TreeGrid做的report报表
ExtJS4下拉树组件 ExtJS4下拉树组件
ExtJS4之初体验,中文版的文档,Getting started with extjs的中文版