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

时间：2023-01-02 15:14:50

原文:【百度地图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”

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

2、从模板列表里选择“phonegap-based application”，然后next

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

3、输入公司名称、项目名称

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

4、选择储存目录。

我一般就放到桌面上，哈哈。

5、右键单击（触控板2个手指按）项目左侧的导航窗口，点击“show in Finder”。

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

6、找到www文件夹。

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

7、把www文件夹拖动到蓝色项目条上

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

8、把你的地图htm文件拷贝到index.html里面。点击运行，就OK啦~

另外，最好部署到真机上，虚拟机上很多功能不是很好用。

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

全部源代码：

<!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的更多相关文章

  1. 如何利用PhoneGap制作地图APP

    摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开发出移动平台上能使用的APP了! --------------- ...

  2. 【百度地图API】如何制作商圈地图？行政地图？

    原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...

  3. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  4. 【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享

    原文:[高德地图API]那些年我们一起开发的APP—即LBS应用模式分享 摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的 ...

  5. 百度地图API：利用瓦片生成工具，自定义背景图片

    参考酸奶小妹的博文<[百度地图API]如何制作一张魔兽地图!!——CS地图也可以,哈哈哈> (http://www.cnblogs.com/milkmap/archive/2011/05/ ...

  6. 百度地图API详解之自定义地图类型

    http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图 ...

  7. android菜鸟学习笔记31----Android使用百度地图API&lpar;二&rpar;获取地理位置及地图控制器的简单使用

    1.获取当前地理位置: Android中提供了一个LocationManager的类,用于管理地理位置.不能通过构造函数获取该类的实例,而是通过Context的getSystemService(): ...

  8. 通过百度地图API显示当前位置在地图上（图标显示）--第三方开源--百度地图（二）

    1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...

  9. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

随机推荐

  1. C&num; 基础知识总结

    要学好C#,基础知识的重要性不言而喻,现将常用到的一些基础进行总结,总结如下: 1. 数据类型转换: 强制类型转换(Chart--> int):  char cr='A';   int i = ...

  2. &lbrack;stm32&rsqb; 利用uC-BmpCvt软件生成uc-gui可调用的bmp图片

    >_<:学习贴图[bmp图]:首先找一张bmp格式的图片,然后下载uC-BmpCvt软件,打开改图片 >_<:然后点击Image-Conver-Into-Best Palatt ...

  3. SPL迭代器的工作和代理模式OuterIterator

    1.迭代器通过foreach语言结构来实现迭代,没有实现迭代器接口(Iterator)的普通对象使用foreach结构会遍历公共属性. 2.OuterIterator用于做为实际迭代器的代理(即代理模 ...

  4. javaEE的十三个技术规范

    java 是一种非常棒的语言,健壮,跨平台运行,屏蔽了具体的平台环境的要求,也就是说只要支持java 虚拟机,就可以运行java程序. 下面,我们一起学习一下J2EE的十三种技术规范. 一.JDBC: ...

  5. 新浪微博。。openapi 分享 图画&plus; 写作

    新浪微博困难啊 .. . .. .郁闷死了. .在此记录它 1.使用界面:https://api.weibo.com/2/statuses/upload_url_text.json 能够申请,.高级权 ...

  6. 利用C&num; 窗体设计 写一个抽奖游戏

    老师布置了一个任务,要求我们做一个抽奖游戏,以下是我个人制作的一个作品与写项目的过程. 我们用到了8个pictureBox控件和一个button,设置好大小,并且编排成一个九宫个形状 添加窗体的背景图 ...

  7. topcoder srm 662 div1

    problem1 link 首先枚举差值$d$,判断是否存在一个序列任意连续两个之间的差值小于$d$. 首先将数字排序,然后从小到大依次放置每一个数字.每个当前的数字有两个位置可以放,当前序列的前面或 ...

  8. codeblocks 更换颜色主题

    关闭codeblocks,下载主题文件(colour_themes.conf).在关闭codeblocks的情况下,linux下的~/.config/codeblocks/下有个conf文件,将其备份 ...

  9. Postgres中的SpinLock锁

    我们知道,在数据库中为了并发控制,少不了要使用各种各样的锁(lock).PostgreSQL中也不例外. 在PostgreSQL中有三种级别的锁,他们的关系如下: |上层 RegularLock | ...

  10. 1&period;springboot：入门项目

    简介: Springboot 来简化spring应用开发,约定大于配置,去繁从简,just run 就可以创建一个独立的,产品应用 背景: J2EE笨重开发,繁多的配置,低下的开发效率,复杂的部署流程 ...

相关文章