摘要：百度地图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的更多相关文章

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

    原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...

  2. （八十一）利用系统自带App来实现导航

    利用系统的地图App进行导航,只需要传入起点和终点.启动参数,调用MKMapItem的类方法openMapWithItems:launchOptions:来实现定位,调用此方法后会打开系统的地图App ...

  3. 如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库

    原文:如何利用[百度地图API],制作房产酒店地图?(下)--结合自己的数据库 摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章…… -------------------------- ...

  4. 利用TabHost制作QQ客户端标签栏效果（低版本QQ）

    学习一定要从基础学起,只有有一个好的基础,我们才会变得更加的perfect 下面小编将利用TabHost制作QQ客户端标签栏效果(这个版本的QQ是在前几年发布的)…. 首先我们看一下效果: 看到这个界 ...

  5. 如何实现在H5里调起高德地图APP？（下）

    这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...

  6. 【转】如何使用PhoneGap打包Web App

    如何使用PhoneGap打包Web App 最近做了一款小游戏,定位是移动端访问,思来想去最后选择了jQuery mobile最为框架,制作差不多以后,是否可以打包成App,恰好以前对PhoneGap ...

  7. 如何实现在H5里调起高德地图APP？

    http://www.cnblogs.com/milkmap/p/5912350.html 这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前 ...

  8. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  9. 如何实现在H5里调起高德地图APP

    这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...

随机推荐

  1. 在VMware虚拟机中安装CentOS 7

    [声明] 欢迎转载,但请保留文章原始出处 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3917 ...

  2. Oracle 热备份batch脚本 Windows

    1.最初来源于网络. 2.根据环境和喜好自己修改. 3.实测是可以完成备份任务的. 4.不推荐用于实际环境. bak.bat:执行时执行此脚本,其他脚本是调用和生成或者生成之后再调用.(需要自己修改先 ...

  3. Java的平台无关性

    转载自:http://www.cnblogs.com/Y/archive/2011/03/22/JavaVM_Learning_Chapter2_Platform_Independence.html ...

  4. 如何注册AWS Global账号

    去年底AWS宣布落地中国以来,可能很多童鞋都在热切地等待试用AWS中国的服务.但是AWS中国目前还在犹抱琵琶半遮面,没有完全向大家开放.不过,大家也不必干等待.要是真感兴趣的话可以自己或者让公司先注册 ...

  5. hdu5514-Frogs（容斥原理）好题

    题意:有m个石头围成一圈,编号分别为0到m-1,现在有n只青蛙,都在0号石头上,第i只青蛙会从当前编号为p的石头跳到编号为(p+ai)%m的石头上.被青蛙经过的石头都会被占领,求这m块石头中所有被占领 ...

  6. HDU 3923 Invoker（polya定理+逆元）

    Invoker Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 122768/62768 K (Java/Others)Total Su ...

  7. ESB服务号列表

    用于以下两个网址: -浙商ESB调用规范- xml格式 -浙商ESB调用规范- json格式   ESB服务号<SERVICE_NO>{serviceNo} 接口中文意思 42000000 ...

  8. <filter-mapping> 的 <dispatcher> 的作用

    The dispatcher has four legal values: FORWARD, REQUEST, INCLUDE, and ERROR. A value of FORWARD means ...

  9. [Java线程] Java线程池ExecutorService

    示例 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.u ...

  10. AFNetworking 与 NSURLSession

    转载自:http://blog.sina.com.cn/s/blog_8157560c0101kt7h.html 1. 也就是说在IOS 7.1 之后你想用网络请求的话有两种途径,NSUrlSessi ...