谷歌地图在天朝时不时被搞导致无法访问,所以如果以国内用户为主的用户还是选择百度地图比较稳妥。
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);
//---------------
}
});