谷歌地圖在天朝時不時被搞導致無法訪問,所以如果以國內用戶爲主的用戶還是選擇百度地圖比較穩妥。
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);
//---------------
}
});