SenchaTouch2.1调用百度地图实例

最新推荐文章于 2024-07-23 10:35:42 发布

weixin_33694620

最新推荐文章于 2024-07-23 10:35:42 发布

阅读量63

点赞数

原文链接：https://my.oschina.net/victorHomePage/blog/110573

版权

2019独角兽企业重金招聘Python工程师标准>>>

SenchaTouch（以下简称st）里面使用的地图示例是采用的googleMap，但由于和谐社会的原因，google地图对我们的支持也是有心无力。在st的使用中也是经常出现无法加载googlemap的js。

但是没了谷歌地图我们依然还是要做开发。不能因为了它就不用地图了不是。下面介绍国内的地图：百度地图。读者可能有些疑惑，因为参考的api使用的都是谷歌的，如果换成百度一下子变得无从下手。故往下看文章的朋友请注意了几点

1、抛开st提供的map组件（xtype:map），在文中的调用百度地图不需要在使用到这个组件了。

2、抛开st中的map示例所提到的步骤，因为在调用百度地图的过程中并没有那么复杂。

3、闲话不多说，进入正题。

调用步骤：

1、创建st项目，详情参考另外一篇文章《Secnha Commands 3 使用详解（从创建到打包》http://my.oschina.net/victorHomePage/blog/109654，项目的创建方式有很多，本文就采用命令方式。

2、打开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);
     //---------------

做完以上的，得出我们想要的东西了。