GMapPanel.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:7k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.ux.GMapPanel
  3.  * @extends Ext.Panel
  4.  * @author Shea Frederick
  5.  */
  6. Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
  7.     initComponent : function(){
  8.         
  9.         var defConfig = {
  10.             plain: true,
  11.             zoomLevel: 3,
  12.             yaw: 180,
  13.             pitch: 0,
  14.             zoom: 0,
  15.             gmapType: 'map',
  16.             border: false
  17.         };
  18.         
  19.         Ext.applyIf(this,defConfig);
  20.         
  21.         Ext.ux.GMapPanel.superclass.initComponent.call(this);        
  22.     },
  23.     afterRender : function(){
  24.         
  25.         var wh = this.ownerCt.getSize();
  26.         Ext.applyIf(this, wh);
  27.         
  28.         Ext.ux.GMapPanel.superclass.afterRender.call(this);    
  29.         
  30.         if (this.gmapType === 'map'){
  31.             this.gmap = new GMap2(this.body.dom);
  32.         }
  33.         
  34.         if (this.gmapType === 'panorama'){
  35.             this.gmap = new GStreetviewPanorama(this.body.dom);
  36.         }
  37.         
  38.         if (typeof this.addControl == 'object' && this.gmapType === 'map') {
  39.             this.gmap.addControl(this.addControl);
  40.         }
  41.         
  42.         if (typeof this.setCenter === 'object') {
  43.             if (typeof this.setCenter.geoCodeAddr === 'string'){
  44.                 this.geoCodeLookup(this.setCenter.geoCodeAddr);
  45.             }else{
  46.                 if (this.gmapType === 'map'){
  47.                     var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
  48.                     this.gmap.setCenter(point, this.zoomLevel);    
  49.                 }
  50.                 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
  51.                     this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
  52.                 }
  53.             }
  54.             if (this.gmapType === 'panorama'){
  55.                 this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
  56.             }
  57.         }
  58.         GEvent.bind(this.gmap, 'load', this, function(){
  59.             this.onMapReady();
  60.         });
  61.     },
  62.     onMapReady : function(){
  63.         this.addMarkers(this.markers);
  64.         this.addMapControls();
  65.         this.addOptions();  
  66.     },
  67.     onResize : function(w, h){
  68.         if (typeof this.getMap() == 'object') {
  69.             this.gmap.checkResize();
  70.         }
  71.         
  72.         Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
  73.     },
  74.     setSize : function(width, height, animate){
  75.         
  76.         if (typeof this.getMap() == 'object') {
  77.             this.gmap.checkResize();
  78.         }
  79.         
  80.         Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
  81.         
  82.     },
  83.     getMap : function(){
  84.         
  85.         return this.gmap;
  86.         
  87.     },
  88.     getCenter : function(){
  89.         
  90.         return this.getMap().getCenter();
  91.         
  92.     },
  93.     getCenterLatLng : function(){
  94.         
  95.         var ll = this.getCenter();
  96.         return {lat: ll.lat(), lng: ll.lng()};
  97.         
  98.     },
  99.     addMarkers : function(markers) {
  100.         
  101.         if (Ext.isArray(markers)){
  102.             for (var i = 0; i < markers.length; i++) {
  103.                 var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
  104.                 this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
  105.             }
  106.         }
  107.         
  108.     },
  109.     addMarker : function(point, marker, clear, center, listeners){
  110.         
  111.         Ext.applyIf(marker,G_DEFAULT_ICON);
  112.         if (clear === true){
  113.             this.getMap().clearOverlays();
  114.         }
  115.         if (center === true) {
  116.             this.getMap().setCenter(point, this.zoomLevel);
  117.         }
  118.         var mark = new GMarker(point,marker);
  119.         if (typeof listeners === 'object'){
  120.             for (evt in listeners) {
  121.                 GEvent.bind(mark, evt, this, listeners[evt]);
  122.             }
  123.         }
  124.         this.getMap().addOverlay(mark);
  125.     },
  126.     addMapControls : function(){
  127.         
  128.         if (this.gmapType === 'map') {
  129.             if (Ext.isArray(this.mapControls)) {
  130.                 for(i=0;i<this.mapControls.length;i++){
  131.                     this.addMapControl(this.mapControls[i]);
  132.                 }
  133.             }else if(typeof this.mapControls === 'string'){
  134.                 this.addMapControl(this.mapControls);
  135.             }else if(typeof this.mapControls === 'object'){
  136.                 this.getMap().addControl(this.mapControls);
  137.             }
  138.         }
  139.         
  140.     },
  141.     addMapControl : function(mc){
  142.         
  143.         var mcf = window[mc];
  144.         if (typeof mcf === 'function') {
  145.             this.getMap().addControl(new mcf());
  146.         }    
  147.         
  148.     },
  149.     addOptions : function(){
  150.         
  151.         if (Ext.isArray(this.mapConfOpts)) {
  152.             var mc;
  153.             for(i=0;i<this.mapConfOpts.length;i++){
  154.                 this.addOption(this.mapConfOpts[i]);
  155.             }
  156.         }else if(typeof this.mapConfOpts === 'string'){
  157.             this.addOption(this.mapConfOpts);
  158.         }        
  159.         
  160.     },
  161.     addOption : function(mc){
  162.         
  163.         var mcf = this.getMap()[mc];
  164.         if (typeof mcf === 'function') {
  165.             this.getMap()[mc]();
  166.         }    
  167.         
  168.     },
  169.     geoCodeLookup : function(addr) {
  170.         
  171.         this.geocoder = new GClientGeocoder();
  172.         this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
  173.         
  174.     },
  175.     addAddressToMap : function(response) {
  176.         
  177.         if (!response || response.Status.code != 200) {
  178.             Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
  179.         }else{
  180.             place = response.Placemark[0];
  181.             addressinfo = place.AddressDetails;
  182.             accuracy = addressinfo.Accuracy;
  183.             if (accuracy === 0) {
  184.                 Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
  185.             }else{
  186.                 if (accuracy < 7) {
  187.                     Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
  188.                 }else{
  189.                     point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
  190.                     if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
  191.                         this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
  192.                     }
  193.                 }
  194.             }
  195.         }
  196.         
  197.     }
  198.  
  199. });
  200. Ext.reg('gmappanel', Ext.ux.GMapPanel);