Extjs4 嵌入百度地图

最新推荐文章于 2019-03-28 11:07:00 发布

Jredreamer

最新推荐文章于 2019-03-28 11:07:00 发布

阅读量6.4k

点赞数

分类专栏： Web前端

Web前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

转自：http://www.luchg.com/blog/showArticle_64.html

文章出自： luchg技术交流 http://www.luchg.com 版权所有。本站文章除注明出处外，皆为作者原创文章，可自由引用，但请注明来源，谢谢。
Extjs4 嵌入百度地图

这个是加载地图的panel：

 
         /* 
        
         地图展示panel 
        
         */ 
        
         Ext.define( 
         'MAP.view.Map' 
         ,{ 
        
         extend: 
         'Ext.panel.Panel' 
         , 
        
         alias:  
         'widget.map' 
         , 
        
         region: 
         'center' 
         , 
        
         initComponent: 
         function 
         (){ 
        
         Ext.apply( 
         this 
         ,{ 
        
         html: 
         '加载地图panel' 
        
         }); 
        
         this 
         .callParent(); 
        
         } 
        
         });

 
         Ext.define( 
         'MAP.controller.Controllers' 
         , { 
        
         extend:  
         'Ext.app.Controller' 
         , 
        
         views: [ 
        
         'Map' 
         , 
        
         'Top' 
         , 
        
         'Details' 
        
         ], 
        
         init:  
         function 
         () { 
        
         this 
         .control({ 
        
         'map' 
         : { 
        
         afterrender: 
         function 
         ( component, eOpts){ 
        
         //初始化地图 
        
         render:  
         this 
         .initMap(component.el.dom); 
        
         } 
        
         }, 
        
         'top > button[action=search]' 
         :{ 
        
         click: 
         function 
         (btn){ 
        
         console.log( 
         "search" 
         ); 
        
         //获取值 
        
         var 
         panel = btn.up( 
         'panel' 
         ); 
        
         var 
         city = panel.down( 
         'textfield[name=city]' 
         ).getValue(); 
        
         var 
         keyword = panel.down( 
         'textfield[name=keyword]' 
         ).getValue(); 
        
         console.log(city+keyword); 
        
         var 
         searchOptions = { 
        
         onSearchComplete: 
         function 
         (results){ 
        
         console.log(results);                             
        
         } 
        
         } 
        
         var 
         local =  
         new 
          BMap.LocalSearch(city, searchOptions);   
        
         local.search(keyword); 
        
         } 
        
         } 
        
         }); 
        
         }, 
        
         /* 
        
         初始化地图 
        
         */ 
        
         initMap: 
         function 
         (div){ 
        
         /* 
        
         初始化地图 
        
         */ 
        
         var 
         map =  
         new 
          BMap.Map(div); 
        
         //默认位置 
        
         var 
         point =  
         new 
          BMap.Point(116.3972,39.9096); 
        
         map.centerAndZoom(point, 12); 
        
         /* 
        
         获取当前位置 
        
         */ 
        
         var 
         localCity =  
         new 
          BMap.LocalCity(); 
        
         localCity.get( 
         function 
         (result){ 
        
         var 
         cityName = result.name; 
        
         var 
         localPoint =  
         new 
          BMap.Point(result.center.lng, result.center.lat); 
        
         map.setCenter(localPoint,cityName); 
        
         }); 
        
         /* 
        
         启用鼠标滚动 
        
         */ 
        
         map.enableScrollWheelZoom();     
         //启用滚轮放大缩小，默认禁用 
        
         map.enableContinuousZoom();     
         //启用地图惯性拖拽，默认禁用 
        
         } 
        
         });