各位是不是很想吧这个地图整合到自己的项目中,让我们来看看代码咯,其实很简单的。
"Note that the js is not minified so it is readable. See Ext.ux.GMapPanel.js and gmap.js for the full source code."
Ext.ux.GMapPanel.js 是高人帮我们写好的一个自定义类,我们直接用就OK了,忽略。我们主要看的,是gmap.js这个文件。
打开文件,不是很长嘛,thank goodness 。首先吧代码收起来如下:
Ext.onReady(function(){
var mapwin;
var button = Ext.get('show-btn');
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!mapwin){
mapwin = new Ext.Window({......});
}
mapwin.show();
});
});
很简单吧,绑定一个按钮,点击的时候,显示一个Window,Window的其他属性我们不看,直接看items。是一个Objecet。
xtype 'gmappanel',这个在标准的Ext API里是没有的,这个类的定义,写在我们刚刚忽略的Ext.ux.GMapPanel.js里面。
zoomLevel: 14,这个是地图的缩放等级,Google Map 一共定义了20个等级,从0 - 19,等缩放等级为19的时候,我们就能看到地球表面的平面图了。
gmapType: 'map',这个属性我也不知道什么意思,我昨天才接触到Google Map,这个属性有两个值,一个是 'map',另一个是 'panorama',这里默认是 'map','panorama',字面上来看,应该是Google Map新出来的 360°C全景图。
mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'] ,很容易看明白,配置地图的参数咯。是一个数组,元素是字符串类型的哟。这里的第一个元素'enableScrollWheelZoom',控制是否能够使用鼠标滚轮改变地图的缩放比例,'enableDoubleClickZoom',字面上的意思是控制是否能够用双击来缩小地图的缩放比例,不过我有把他去掉,但没有效果,依然可以双击缩小比例,郁闷。'enableDragging',用来控制,是否能够使用鼠标拖动地图。
mapControls:['GSmallMapControl','GMapTypeControl','NonExistantControl'],这是控制地图上的控件的配置数组。'GSmallMapControl',在地图左上角显示小型平移/缩放控件,'GMapTypeControl',在地图的右上角显示可以切换地图类型(如“地图”和“卫星”)的按钮。第三个嘛,不知道有什么用,去掉也没有任何异常。
markers: [{
lat: 42.339641,
lng: -71.094224,
marker: {title: 'Boston Museum of Fine Arts'},
listeners: {
click: function(e){
Ext.Msg.alert('Its fine', 'and its art.');
}
}
},{......}]
这个数组的没一个元素,都将在地图上以一个标记的形式出现,lat,lng,经纬度,Google Map上的所有定位,都是用经纬度来标记的。marker,标记的配置属性,是一个Object,可以定义title,鼠标放上去会显示的提示,还有icon,标记的图标,当然,定义图标并没有这么简单哟,还可以定义draggable,这是个布尔值,默认是false,控制是否能够移动标记,还有......自己看 API咯。listeners,这个,不用说了吧。当触发click事件的时候,执行所定义的方法。这里是弹出一个提示框。
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
}
Google Map,除了缩放级别为20的时候,基本上都是要我们定一个中心点,以便显示这个中心点周围的地图。范例里面的marker跟上面markers数组里的定义是一样的。但这里多了一个geoCodeAddr属性,这个属性是字符类型,其实是一个地址,后台的JS会吧这个字符串发给Google服务器,然后查询出该地址的经纬度,然后再确定地图的中心。
没有了,简单吧。顺便再说一句。geoCodeAddr这种方法,对中文似乎不是很支持,这个,只有老外用起来才会感觉到爽。没办法,谁叫这玩意不是我们中国人做的呢。有种办法可以解决咯,跟markers数组一样,用经纬度来确定咯(这里补充一下,将geoCodeAddr替换为lat,lng属性的时候,地图上的控件没有办法显示出来,我不知道为什么,希望高人能够指点一下,我暂时的解决办法是,将Ext.ux.GMapPanel.js文件中第74行的:GEvent.bind(this.gmap, 'load', this, function(){this.onMapReady();}); 改成 this.onMapReady();,这样写就OK了。)。一般,吧中心位置设置为 lat: 37, lng: 104,缩放比例为 4,就可以看到中国雄鸡的全身照了。然后接下来,就是经纬度我们怎么知道呢,这个简单,到网上查究是咯,百度一下,不要太多。不过大部分都不精确,如果你需要非常精确地经纬度的话,也很简单,拿这个例子来说,还记得刚刚那个click事件吗?还记得marker的配置属性draggable 吗?对了,我们可以把draggable设置成true,让标记可以移动,然后,当我们click标记的时候,click的监听函数,会得到一个参数,一个Object,我们直接alert这个这个参数,就可以得到当前标记所在位置的经纬度,我们也可以吧这个参数编译成JSON字符串,比如处在上海标记的JSON字符串为:{"Ue":31.228362369906602,"Va":121.47342681884766,"x":121.47342681884766,"y":31.228362369906602}。
OK,差不多了,这个例子搞明白了,基本上Google Map的简单应用,大家应该都可以自己做出来了吧。比如 鼠标移动某个城市的标记上,显示这个城市的经纬度,天气,还有一些相关信息等等,或者跳转到另一个页面
"Note that the js is not minified so it is readable. See Ext.ux.GMapPanel.js and gmap.js for the full source code."
Ext.ux.GMapPanel.js 是高人帮我们写好的一个自定义类,我们直接用就OK了,忽略。我们主要看的,是gmap.js这个文件。
打开文件,不是很长嘛,thank goodness 。首先吧代码收起来如下:
Ext.onReady(function(){
var mapwin;
var button = Ext.get('show-btn');
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!mapwin){
mapwin = new Ext.Window({......});
}
mapwin.show();
});
});
很简单吧,绑定一个按钮,点击的时候,显示一个Window,Window的其他属性我们不看,直接看items。是一个Objecet。
xtype 'gmappanel',这个在标准的Ext API里是没有的,这个类的定义,写在我们刚刚忽略的Ext.ux.GMapPanel.js里面。
zoomLevel: 14,这个是地图的缩放等级,Google Map 一共定义了20个等级,从0 - 19,等缩放等级为19的时候,我们就能看到地球表面的平面图了。
gmapType: 'map',这个属性我也不知道什么意思,我昨天才接触到Google Map,这个属性有两个值,一个是 'map',另一个是 'panorama',这里默认是 'map','panorama',字面上来看,应该是Google Map新出来的 360°C全景图。
mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'] ,很容易看明白,配置地图的参数咯。是一个数组,元素是字符串类型的哟。这里的第一个元素'enableScrollWheelZoom',控制是否能够使用鼠标滚轮改变地图的缩放比例,'enableDoubleClickZoom',字面上的意思是控制是否能够用双击来缩小地图的缩放比例,不过我有把他去掉,但没有效果,依然可以双击缩小比例,郁闷。'enableDragging',用来控制,是否能够使用鼠标拖动地图。
mapControls:['GSmallMapControl','GMapTypeControl','NonExistantControl'],这是控制地图上的控件的配置数组。'GSmallMapControl',在地图左上角显示小型平移/缩放控件,'GMapTypeControl',在地图的右上角显示可以切换地图类型(如“地图”和“卫星”)的按钮。第三个嘛,不知道有什么用,去掉也没有任何异常。
markers: [{
lat: 42.339641,
lng: -71.094224,
marker: {title: 'Boston Museum of Fine Arts'},
listeners: {
click: function(e){
Ext.Msg.alert('Its fine', 'and its art.');
}
}
},{......}]
这个数组的没一个元素,都将在地图上以一个标记的形式出现,lat,lng,经纬度,Google Map上的所有定位,都是用经纬度来标记的。marker,标记的配置属性,是一个Object,可以定义title,鼠标放上去会显示的提示,还有icon,标记的图标,当然,定义图标并没有这么简单哟,还可以定义draggable,这是个布尔值,默认是false,控制是否能够移动标记,还有......自己看 API咯。listeners,这个,不用说了吧。当触发click事件的时候,执行所定义的方法。这里是弹出一个提示框。
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
}
Google Map,除了缩放级别为20的时候,基本上都是要我们定一个中心点,以便显示这个中心点周围的地图。范例里面的marker跟上面markers数组里的定义是一样的。但这里多了一个geoCodeAddr属性,这个属性是字符类型,其实是一个地址,后台的JS会吧这个字符串发给Google服务器,然后查询出该地址的经纬度,然后再确定地图的中心。
没有了,简单吧。顺便再说一句。geoCodeAddr这种方法,对中文似乎不是很支持,这个,只有老外用起来才会感觉到爽。没办法,谁叫这玩意不是我们中国人做的呢。有种办法可以解决咯,跟markers数组一样,用经纬度来确定咯(这里补充一下,将geoCodeAddr替换为lat,lng属性的时候,地图上的控件没有办法显示出来,我不知道为什么,希望高人能够指点一下,我暂时的解决办法是,将Ext.ux.GMapPanel.js文件中第74行的:GEvent.bind(this.gmap, 'load', this, function(){this.onMapReady();}); 改成 this.onMapReady();,这样写就OK了。)。一般,吧中心位置设置为 lat: 37, lng: 104,缩放比例为 4,就可以看到中国雄鸡的全身照了。然后接下来,就是经纬度我们怎么知道呢,这个简单,到网上查究是咯,百度一下,不要太多。不过大部分都不精确,如果你需要非常精确地经纬度的话,也很简单,拿这个例子来说,还记得刚刚那个click事件吗?还记得marker的配置属性draggable 吗?对了,我们可以把draggable设置成true,让标记可以移动,然后,当我们click标记的时候,click的监听函数,会得到一个参数,一个Object,我们直接alert这个这个参数,就可以得到当前标记所在位置的经纬度,我们也可以吧这个参数编译成JSON字符串,比如处在上海标记的JSON字符串为:{"Ue":31.228362369906602,"Va":121.47342681884766,"x":121.47342681884766,"y":31.228362369906602}。
OK,差不多了,这个例子搞明白了,基本上Google Map的简单应用,大家应该都可以自己做出来了吧。比如 鼠标移动某个城市的标记上,显示这个城市的经纬度,天气,还有一些相关信息等等,或者跳转到另一个页面