【百度地图API】如何利用PhoneGap制作地图APP
原文:【百度地图API】如何利用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>
【百度地图API】如何利用PhoneGap制作地图APP的更多相关文章
- 如何利用PhoneGap制作地图APP
摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开发出移动平台上能使用的APP了! --------------- ...
- 【百度地图API】如何制作商圈地图？行政地图？
原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...
- 【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
- 【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享
原文:[高德地图API]那些年我们一起开发的APP—即LBS应用模式分享 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...
- 百度地图API：利用瓦片生成工具，自定义背景图片
参考酸奶小妹的博文<[百度地图API]如何制作一张魔兽地图!!——CS地图也可以,哈哈哈> (http://www.cnblogs.com/milkmap/archive/2011/05/ ...
- 百度地图API详解之自定义地图类型
http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图 ...
- android菜鸟学习笔记31----Android使用百度地图API(二)获取地理位置及地图控制器的简单使用
1.获取当前地理位置: Android中提供了一个LocationManager的类,用于管理地理位置.不能通过构造函数获取该类的实例,而是通过Context的getSystemService(): ...
- 通过百度地图API显示当前位置在地图上（图标显示）--第三方开源--百度地图（二）
1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
随机推荐
- 【转】c#实现字符串倒序的n种写法
其中LINQ写法最为简洁 //string concatenation with for loop public string ReverseA(string text) { char[] c ...
- 解决visual studio空格变成很多点号的3种方法
在用visual studio做网站时不知道按了什么快捷键,所有页面上的空格都变成了点号,就像下图那样. 要解决空格变点号的方法有两种:1.编辑->高级->查看空白2.Ctrl+E 然后按 ...
- ASP.NET2.0组件控件开发视频 初体验
原文:ASP.NET2.0组件控件开发视频 初体验 ASP.NET2.0组件控件开发视频 初体验 录了视频,质量不是很好,大家体验下.我会重新录制的 如果不清楚,可以看看http://v.youku. ...
- Leetcode 实施细节 Rotate Image
本文senlie原版的,转载请保留此地址:http://blog.csdn.net/zhengsenlie Rotate Image Total Accepted: 15609 Total Submi ...
- SQL优化策略高级优化经常使用-1（The Return Of The King）
1 经常使用的优化策略 1.1 语句 1.1.1使用实际的列名 当我们查询SQL语句时.你是否觉得使用实际的列名比使用*更快呢?答案是肯定的. 为了证实这一点,感兴趣的朋友能够自己验证一下.我这 ...
- Java 信号 Semaphore 简介
Semaphore当前在多线程环境下被扩放使用.操作系统的信号量是个非常重要的概念,在进程控制方面都有应用. Java 并发库 的Semaphore 能够非常轻松完毕信号量控制,Semaphore能够 ...
- HDU 1541 Stars （树状数组）
Problem Description Astronomers often examine star maps where stars are represented by points on a p ...
- 新RSS reader
阅读之前采取正确的方法,但是非常不介意,没有收到订阅很大. 走到今天 http://www.feedspot.com 2014/11/8追加:用下来感觉不错. feedspot 的相关快捷键例如以下: ...
- BizTalk开发小技巧
BizTalk开发小技巧 随笔分类 - Biztalk Biztalk 使用BizTalk实现RosettaNet B2B So Easy 摘要: 使用BizTalk实现RosettaNet B2B ...
- 缓存之EHCache（转）
一.简介非常简单,而且易用. ehcache 是一个非常轻量级的缓存实现,而且从1.2 之后就支持了集群,而且是hibernate 默认的缓存provider.ehcache 是一个纯Java的进程内 ...