Sencha touch使用百度地图
Sencha touch使用百度地图
在最近的手机项目中需要用到地图，由于google的服务器迁离大陆，使用谷歌需要国外出口的缘故，出现google访问不稳定，因此在国内的手机访问地图，只能转接到百度地图上。Sencha touch系统是一个新推出的平台，正在不断进行完善和升级过程中，在其给出的开发里程及其文档中，只给出了与google接口和实例，对于百度地图的支持没有给出，并且在网上相关的资料也查不到。
本人在进行手机开发过程，深入分析了百度地图的API及sencha touch的相关文档，参照sencha touch与google地图的例子，实现了百度地图的接口。在这里把我所实现的例子和过程共享给大家，供参考。
1． 实现的界面：
实现的具体步骤和过程如下：
（1） 建立sencha touch的环境：
安装JDK、tomcat，并没涉及到java编程，只是借用tomcat的web环境。
安转sencha touch环境，下载sencha touch,并安装，具体参考本博主的其他博文。
建立一个百度的baidumap目录，并将sencha touch的相关文件放在该目录下。
（2） 编写index.html
现在我们开始写主要的入口文件：
<!DOCTYPE html>
<html>
<head>
< http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sencha baidu map</title>
<link rel="stylesheet" href="/sencha-touch.css" type="text/css">
< type="text/java" src="/sencha-touch.js"></>
< type="text/java" src="/sencha-touch-debug.js"></>
< type="text/java" src="http://api.map.baidu.com/api?key=2b0aabcbba3b049f54e5e521ef50e90d&v=1.0&services=true"></>
<!--< type="text/java" src="http://api.map.baidu.com/api?v=1.2"></> -->
< type="text/java" src="/bmap.js"></>
</head>
<body>
<div id="loading-mask" style="margin:auto;width:200px;padding-top:50px">Baidu Map Demo</div>
<div style='width:400px;height:600px;border:1px solid gray' id='baiduMapDiv'>BaiduMap</div>"
<!--< type="text/java" src="/bmap.js"></> -->
</body>
</html>
在此文件中已经嵌入了bmp.js
（3） 编写bmap.js
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: () {
initializeMap();
var map = new BeidaSoft.BMap({});
}
});
initializeMap()
{
map = new BMap.Map("baiduMapDiv");// 创建Map实例
var point1 = new BMap.Point( 116.404, 39.915 );
map.centerAndZoom(point1,12);
};
（4） 运行
编写好上面的文件后，重新启动tomcat后，打开谷歌或苹果浏览器（必须是基于ｗｉｋｉ内核的浏览器），输入http://localhost:8080/baidumap/index.html。就可以看到地图的效果了，够简单吧！