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。本文仅描述最简单的配置。