Sencha touch使用百度地圖

谷歌地圖在天朝時不時被搞導致無法訪問,所以如果以國內用戶爲主的用戶還是選擇百度地圖比較穩妥。

Sencha touch默認封裝了google地圖爲其地圖插件,雖然使用簡單,但也無奈只能放棄。

使用百度地圖步驟如下:

1.打開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>

2.做好引入文件的工作後,然後編輯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
                    }
                ]

        }]
    } 
});
    

 3.在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);
     //---------------
    } 
});
    


發佈了131 篇原創文章 · 獲贊 85 · 訪問量 82萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章