如何利用PhoneGap制作地图APP
摘要：百度地图API是一套由javascript编写的地图程序接口，按说它应该运行在浏览器上。现在，只要利用PhoneGap，我们就能开发出移动平台上能使用的APP了！
---------------------------------------------
一、安装平台
PhoneGap支持5种平台，IOS，安卓，黑莓，WebOS，塞班。
我们下面以IOS为例，开发一个定位的APP。
1、下载xCode
注意看清楚，狮子系统和雪豹系统的安装程序是不一样的。
a.可以到苹果应用商店app store上下载，不过速度非常的慢，一通宵都下载不到20%……优点是免费。
b.也可以到macx上下载，速度快，非会员收费。
c.其实也可以找有安装程序的人拷贝，速度快，也免费……
2、下载PhoneGap
到官网上下载，免费的，https://github.com/phonegap/phonegap/zipball/1.0.0
二、项目配置
1、启动xCode，在菜单那里选择“create a new xcode project”
2、从模板列表里选择“phonegap-based application”，然后next
3、输入公司名称、项目名称
4、选择储存目录。
我一般就放到桌面上，哈哈。
5、右键单击（触控板2个手指按）项目左侧的导航窗口，点击“show in Finder”。
6、找到www文件夹。
7、把www文件夹拖动到蓝色项目条上
8、把你的地图htm文件拷贝到index.html里面。点击运行，就OK啦~
另外，最好部署到真机上，虚拟机上很多功能不是很好用。
全部源代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冀兴驾校--手机版</title>
<link rel="icon" type="image/x-icon" href="http://www.jixingjx.com/favicon.ico" />
<meta name="keyword" content="冀兴驾校,冀兴驾校手机版,jixingjiaxiao"/>
<meta name="description" content="冀兴驾校手机版，让你更快更准确地找到冀兴驾校！"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style>
body,html,#jx_map{height:100%;width:100%;padding:0;margin:0;font-size:14px;}
</style>
</head>
<body>
<div id="jx_map"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("jx_map");
map.centerAndZoom("北京", 14);
map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor:BMAP_ANCHOR_TOP_LEFT}));
map.addControl(new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_ZOOM, anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
// 定义一个控件类
function MyLocation(){
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 10);
}
MyLocation.prototype = new BMap.Control();
MyLocation.prototype.initialize = function(map){
var div = document.createElement("div");
div.appendChild(document.createTextNode("定位"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
div.style.padding = "10px";
div.style.borderRadius = "5px";
div.onclick = function(e){
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
gc.getLocation(r.point, function(rs){
var sContent = "您的位置是:</br>" + rs.address;
var infoWindow = new BMap.InfoWindow(sContent, {width:150, offset:new BMap.Size(0,-20)});
map.openInfoWindow(infoWindow, r.point);
});
}
else {
alert("网络不通，请稍后再试。");
}
})
}
map.getContainer().appendChild(div);
return div;
}
var mylocation = new MyLocation(); //定位
map.addControl(mylocation);
var gc = new BMap.Geocoder(); //地址解析
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fc20b7442b4e0e7b9e42e799fae5f60bd' type='text/javascript'%3E%3C/script%3E"));
</script>
</html>
如何利用PhoneGap制作地图APP的更多相关文章
- 【百度地图API】如何利用PhoneGap制作地图APP
原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...
- （八十一）利用系统自带App来实现导航
利用系统的地图App进行导航,只需要传入起点和终点.启动参数,调用MKMapItem的类方法openMapWithItems:launchOptions:来实现定位,调用此方法后会打开系统的地图App ...
- 如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库
原文:如何利用[百度地图API],制作房产酒店地图?(下)--结合自己的数据库 摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章…… -------------------------- ...
- 利用TabHost制作QQ客户端标签栏效果（低版本QQ）
学习一定要从基础学起,只有有一个好的基础,我们才会变得更加的perfect 下面小编将利用TabHost制作QQ客户端标签栏效果(这个版本的QQ是在前几年发布的)…. 首先我们看一下效果: 看到这个界 ...
- 如何实现在H5里调起高德地图APP？（下）
这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...
- 【转】如何使用PhoneGap打包Web App
如何使用PhoneGap打包Web App 最近做了一款小游戏,定位是移动端访问,思来想去最后选择了jQuery mobile最为框架,制作差不多以后,是否可以打包成App,恰好以前对PhoneGap ...
- 如何实现在H5里调起高德地图APP？
http://www.cnblogs.com/milkmap/p/5912350.html 这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前 ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- 如何实现在H5里调起高德地图APP
这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...
随机推荐
- 中文+django1.9+python3.5一些注意点
1.模板html文件里一定要加 <!DOCTYPE html><meta http-equiv="Content-type" content="text ...
- 【Linux】Mutex互斥量线程同步的例子
0.互斥量 Windows下的互斥量 是个内核对象,每次WaitForSingleObject和ReleaseMutex时都会检查当前线程ID和占有互斥量的线程ID是否一致. 当多次Wait**时就 ...
- linux 为开机菜单加密码·
首先是在/boot/grub/menu.lst 里面添加密码的,但是需要是加密过后的,否则人家直接跑到你的menu.lst里面查看密码不就行了.... 于是,可以使用grub提供的md5加密功能: # ...
- Objective-C开发图书推荐
日本Objective-C圣经级教材:Objective-C编程全解(第3版) 作 者 [日] 荻原刚志 著:唐璐,翟俊杰 译 出 版 社 人民邮电出版社 出版时间 2015-01-01 版 ...
- 转-sketch技巧
10个帮你UI设计提速的Sketch使用技巧 2015-4-11 09:59| 发布者: yuanxingbbs| 查看: 1129| 评论: 0 选择使用Sketch的理由很多,因为好奇跟风安装 ...
- 在Ubuntu下ADT识别不出真机的解决办法
前两天把系统换成Ubuntu 12.04,今天在写代码的时候准备真机调试,结果ADT识别不出真机,我擦.果断网上查找了一下解决办法,经过半个小时左右的折腾,尼玛,终于搞定了.具体解决办法如下: 1.先 ...
- [转] AOP面向切面编程
AOP面向切面编程 AOP(Aspect-Oriented Programming,面向切面的编程),它是可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术. ...
- Mysql的AB复制(主从复制)原理及实现
Mysql复制(replication)是一个异步的复制,从一个Mysql 实例(Master)复制到另一个Mysql 实例(Slave).实现整个主从复制,需要由Master服务器上的IO进程,和S ...
- 为operamasks增加HTML扩展方式的组件调用
#为operamasks增加HTML扩展方式的组件调用 ##背景 之前的[博文](http://www.cnblogs.com/p2227/p/3540858.html)中有提及到,发现easyui中 ...
- HP ILO2 使用详细教程
iLO是Intergrated Light-Out的缩写,是惠普特有的远程管理功能,目前最新的版本是iLO2.通过iLO2可以实现硬件级别的服务器远程管理,包括开关机.重启.服务器状态的监控.虚拟KV ...