SenchaTouch2.1調用百度地圖實例

       SenchaTouch（如下簡稱st）裏面使用的地圖示例是採用的googleMap，但因爲和諧社會的緣由，google地圖對咱們的支持也是有心無力。在st的使用中也是常常出現沒法加載googlemap的js。

        可是沒了谷歌地圖咱們依然仍是要作開發。不能由於了它就不用地圖了不是。下面介紹國內的地圖：百度地圖。讀者可能有些疑惑，由於參考的api使用的都是谷歌的，若是換成百度一會兒變得無從下手。故往下看文章的朋友請注意了幾點

        一、拋開st提供的map組件（xtype:map），在文中的調用百度地圖不須要在使用到這個組件了。

        二、拋開st中的map示例所提到的步驟，由於在調用百度地圖的過程當中並無那麼複雜。

        三、閒話很少說，進入正題。    

    調用步驟：

        一、建立st項目，詳情參考另一篇文章《Secnha Commands 3 使用詳解（從建立到打包》http://my.oschina.net/victorHomePage/blog/109654，項目的建立方式有不少，本文就採用命令方式。

    

        二、打開index.html文件，加入如下代碼。      

<!--添加下面的meta標籤： -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />              <!--這樣作是爲了讓頁面以正常比例進行顯示而且禁止用戶縮放頁面的操做。--> 

<!--添加引入百度Map的javascript-->
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

     3.作好引入文件的工做後，而後編輯app/view裏面的Main.js，修改爲以下代碼。（懶人可直接複製粘貼）

Ext.define('BdMapDemo.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar'
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [
            {
                iconCls: 'maps',
                styleHtmlContent: true,
                scrollable: false,
                layout:'vbox',
                items: [{
                    xtype: 'titlebar',
                    title: '調用百度地圖'
                    },{
                      xtype:'panel',
                      id:'map',
                      flex:1
                    }
                ]

        }]
    } 
});
    

    4.在app.js裏面的launch函數裏面添加對百度map的配置  

//核心代碼
              var map = new BMap.Map('map');//指向map的容器
              map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
            window.setTimeout(function(){  
                                    map.panTo(new BMap.Point(116.409, 39.918));
                                    }, 2000);
     //---------------

 作完以上的，得出咱們想要的東西了。

關於更多百度map的配置，請查看百度的api。本文僅描述最簡單的配置。