开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【百度地图API】如何利用PhoneGap制作地图APP

简介: 原文:【百度地图API】如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上。现在,只要利用PhoneGap,我们就能开发出移动平台上能使用的APP了! --------------------------------------------- 一、安装平台 PhoneGap支持5种平台,IOS,安卓,黑莓,WebOS,塞班。
+关注继续查看
原文:【百度地图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>



 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WEB音频API
本文转载至 http://www.webhek.com/web-audio-api 很偶然的,在一个微信公众号里面,看到了这样的一篇文章。 WEB音频API。作者分享技术的优良品质值得我们学习。
861 0
Web API路由
译者:jiankunking 出处:http://blog.csdn.net/jiankunking 原文地址 本文讲解ASP.NET Web API如何将HTTP请求路由至控制器。 如果你熟悉ASP.NET MVC,Web API路由与MVC路由非常相似。主要差别是Web API使用HTTP方法,而不是URI路径来选择Action。你也可以按照之前配置M
2194 0
Web APi之消息处理管道(五)
前言 MVC有一套请求处理的机制,当然Web API也有自己的一套消息处理管道,该消息处理管道贯穿始终都是通过HttpMessageHandler来完成。我们知道请求信息存在 RequestMessage 中,而响应信息则存在 ResponseMessage 中,当请求信息进入到管道中,此时HttpMessageHandler会对此进行相应的处理,当执行到控制器上的方法时此时就会进行响应,生成的响应信息HttpResponseMessage就会逆向通过HttpMessageHandler依次进行处理最终返回给客户端。
778 0
Web Api简单用法
ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器、移动设备等多种客户端的 Http 服务的新框架, ASP.NET Web API 也是构建 RESTful 服务的理想平台。
939 0
Web API 简单示例
原文:Web API 简单示例 一、RESTful和Web API   Representational State Transfer (REST) is a software architecture style consisting of guidelines and best practices for creating scalable web services.
982 0
****Web API 版本控制的几种方式
个人建议:用content type,即放在Header里面!比如加一个Version:1.4.3   这篇文章写得很好,介绍了三种实现web api版本化的三种方式。我从评论里又收集到两种方式,所以一共是5种: 方式一:利用URL   ? 1 2 HTTP GET: https://haveibeenpwned.
740 0
MVC4 WebAPI(一)
不管是因为什么原因,结果是在新出的MVC中,增加了WebAPI,用于提供REST风格的WebService,个人比较喜欢REST风格的WebService,感觉比SOAP要轻量级一些,而且对客户端的要求也更少,更符合网络数据传输的一般模式,客户端完全摆脱了代理和管道来直接和WebService进行交...
1089 0
Web API 版本控制的几种方式
http://www.troyhunt.com/2014/02/your-api-versioning-is-wrong-which-is.html 这篇文章写得很好,介绍了三种实现web api版本化的三种方式。
1172 0
+关注
杰克.陈
一个安静的程序猿~
10424
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载