Sencha Touch 2 Map

Sencha Touch 2 Map

• 博客分类： 
• Sencha Touch
• gmap
• 画线！

map google js ext

Js代码  

1. /**    
2.  * @Author sai    
3.  *    
4.  */   
5.   
6.   
7. Ext.define('SmartMenu.view.contact.Map', {  
8.     extend: 'Ext.Map',  
9.   
10.     config: {  
11.           t:'',  
12.           lat:'',  
13.           lng:'',  
14.           mapOptions: {  
15.               zoom: 9  
16.           },  
17.           
18.         listeners: [  
19.             {  
20.                 fn: 'onMapMaprender',  
21.                 event: 'maprender'  
22.             }  
23.         ]  
24.     },  
25.   
26.     onMapMaprender: function(map, options) {  
27.      var gmap=this.getMap();  
28.       var infoWindow = new google.maps.InfoWindow();  
29.       var title=this.getT();  
30.       infoWindow.setContent(title);  
31.       var c=new google.maps.LatLng( this.getLat(),this.getLng());  
32.       map.setMapCenter(c);  
33.       var marker= new google.maps.Marker({  
34.           position:c,    
35.           map: gmap,  
36.           title:title,  
37.           draggable: false,  
38.           animation: google.maps.Animation.DROP  
39.           });   
40.         infoWindow.open(gmap, marker);  
41.   
42.          google.maps.event.addListener(marker, "click", function() {  
43.            infoWindow.close();  
44.            infoWindow = new google.maps.InfoWindow({  
45.                  map: gmap,  
46.                  position: c,  
47.                  content: title  
48.                });  
49.          });          
50.           
51.           navigator.geolocation.getCurrentPosition(function(position) {  
52.               pos = new google.maps.LatLng(position.coords.latitude,  
53.                                                 position.coords.longitude);  
54.   
55.                   
56.                var centerMarker= new google.maps.Marker({  
57.                    position: pos,  
58.                    map: gmap,  
59.                    draggable: false,  
60.                    animation: google.maps.Animation.DROP  
61.                    });  
62.                google.maps.event.addListener(centerMarker, "click", function() {  
63.                    infoWindow.close();  
64.                    infoWindow = new google.maps.InfoWindow({  
65.                       title:arrLang[23],  
66.                        map: gmap,  
67.                        position: pos,  
68.                        content: arrLang[24]  
69.                      });  
70.                });  
71.                  
72.                var populationOptions = {  
73.                         strokeColor: "#FF0000",  
74.                         strokeOpacity: 0.8,  
75.                         strokeWeight: 2,  
76.                         fillColor: "#FF0000",  
77.                         fillOpacity: 0.35,  
78.                         map: gmap,  
79.                         center: pos,  
80.                         radius: 1000  
81.                       };  
82.                var cityCircle = new google.maps.Circle(populationOptions);  
83.                var  Target= marker.getPosition();  
84.                var directionsService = new google.maps.DirectionsService();  
85.                  var directionsDisplay = new google.maps.DirectionsRenderer();    
86.                 directionsDisplay.setMap(gmap);  
87.                 var request = {    
88.                         origin:pos,     
89.                         destination:Target,    
90.                         travelMode: google.maps.DirectionsTravelMode.DRIVING    
91.                       };    
92.                       directionsService.route(request, function(result, status) {    
93.                         if (status == google.maps.DirectionsStatus.OK) {    
94.                           directionsDisplay.setDirections(result);    
95.                         }    
96.                       });   
97.                     setTimeout(function(){infoWindow.close();},3000);  
98.              },function(){  
99.                 alert("Error",arrLang[25]);  
100.              });  
101.      
102.     }  
103.   
104.       
105.       
106.      
107. });  
108.   
109. var map= Ext.create('SmartMenu.view.contact.Map',  
110.             {   //id:'Map',  
111.                 fullscreen: true,  
112.                 title: map,  
113.                 t: data.title,  
114.                 lat: data.lat,  
115.                 lng: data.lng  
116.             });  
117.    
118. var btn = Ext.getCmp('btnFavorites');  
119.         btn.setText('重新定位');  
120.        // btn.setIconCls('locate');  
121.         btn.setHidden(false);  
122.         btn.setHandler(function () {  
123.                 map.fireEvent('maprender', map);  
124.                 }  
125.                 );