《PhoneGap移动应用开发手册》——1.7节根据位置坐标检索地图数据-阿里云开发者社区

开发者社区> 异步社区> 正文

《PhoneGap移动应用开发手册》——1.7节根据位置坐标检索地图数据

简介:
+关注继续查看

本节书摘来自异步社区《PhoneGap移动应用开发手册》一书中的第1章,第1.7节根据位置坐标检索地图数据,作者 【英】Matt Gifford,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.7 根据位置坐标检索地图数据
PhoneGap移动应用开发手册
本节基于设备位置传感器返回的经纬度坐标,使用Google Maps API作为JaveScript,讲述如何在屏幕上绘制地图,及生成地图位置标签。

准备工作
编码之前,先行搭建环境、获取Google Maps服务的访问权限。

(1)注册一个Google Maps API key:访问https://code.google.com/apis/console/,并使用你的Google账户登录。

(2)从左边菜单中选择Services选项,并激活Google Maps API v3 service。

(3)一旦服务激活,在API access页面中就会生成用户的API key。在该页Simple API Access章节就会发现该key,效果如图1.9所示。


0275858614a242f3660306680bb85c4f8ee40a20

(4)现在可以开始我们的例子了。

实现步骤
使用设备的GPS功能获取位置坐标、创建并初始化地图、显示当前位置的标记。

(1)为页面创建基本的HTML框架。


a791d6b6c6e5b9260d3c75371b49ba79ed642b9f

(2)在head标签中添加Google Maps API需要的JavaScript。将API key加入脚本中src属性的查询字符串中。

(3)接下来,添加对cordova-2.0.o.js的引用,并创建另一个JavaScript标签块,以存放自定义代码。


c489035ec1f6ef35cc8fa886dff2cf47c9e6f0e5

(5)下一步,创建onSuccess函数,访问position对象返回的位置信息。

(6)根据从设备位置传感器获取到的latitude和longitude信息,创建latLng对象,在组件初始化时将其传入Map对象。

(7)设置Map选项,将设置的latlLng变量的值作为地图的中心。Google Map控件在转换到移动设备屏幕上时可能会出现异常,尤其在可用性方面。用户可以自定义需要使用的控件。本例中使用zoomControl控件而不使用panControl控件。

(8)为定义Map对象,需引用一个div元素,并传递给之前定义的mapOptions变量。

(9)为关闭该方法,下面创建marker变量显示latLng对象表示的精确位置。


79c022ef96bb62925d2cc192e2a2f72c63668dc7

(10)为确保对返回的错误都能正确处理,下面创建onError方法,它将根据div元素内的错误码显示对应的字符串消息。


c5c1023b3f577a363e93845b417bae693f551a81

(11)在body标签中导入显示地图的div元素。


f25b86450bc2180847416664c37a637d9edcfa3f

实现原理
多亏开放的绘制服务,比如Google Maps,才能从设备获取位置更新,并利用返回的数据,创建丰富的、可交互的、可视化地图应用程序。

本例中,使用设备的坐标作为Map的中心位置,并且在地图上创建Marker置于标签之上,易于可视化。

这类地图服务的可用API相当丰富,其中的信息非常详细,并包括许多函数及方法可以帮助开发者实现基于位置的工具和应用程序。一些服务限制对API的需求数目,所以编写程序的时候一定要注意相关限制。

相关内容
本例中使用Goole Maps API作为JavaScript。Google提供的API有许多不同的层次。也可以访问其他地图绘制系统,诸如MapQuest、MultiMap和Yahoo! Maps提供者。读者可以尝试使用这些不同的服务,并通过实验从中挑出最适合自己的解决方案。

静态地图
本例所使用的是动态Google Map API。这样做是为了可以使用zoom控件,并且使得用户能在最终应用中拖拉地图。

读者同样可以选用Google Static Map服务,该服务生成地图的代码相对简单,将会返回位置的静态图片。

读者可以在该服务中选择使用API key。此后仍然可以和本例开始时启用API Access的方式一样来启用API。

思考下面的代码,其是对onSuccess函数的一个修订,获取到位置信息后将会运行。


692791591ed7ef32b4e38b43b85185190cae25c3

从中可以看到,通过运用Static Maps API,此处仅仅使用了一个图像资源,将坐标、图像大小及其他数据作为参数,比之前代码中创建坐标、地图及标签的操作要简单得多。

虽然使用Static Map API会使得程序失去用户对动态地图的交互性,然而整个服务会变得简单许多,要求的代码量也会大量减少

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

相关文章
新一代图片编解码技术在淘宝的应用及落地
本文回顾淘宝图片发展的历史,阐述了新一代图像编解码格式AVIF在淘宝业务场景中的应用及落地方案,节省流量,为用户提供更好的看图体验。
64 0
Qt编写地图综合应用19-地图服务
一、前言 国内提供地图服务的厂家基本上是五家,百度地图、高德地图、腾讯地图、搜狗地图、天地图,国外的一般还有谷歌地图、微软地图(BING地图),这几家的地图服务的api接口都大同小异,甚至很多函数的名字都一模一样,毕竟叫的很通俗,这样也很容易理解,除了引入的地图服务JS文件不同,对象名称不同,其他.
643 0
多地iPhone用户遭盗刷 企业数据泄露的结无解?
对于企业来说,大数据在如今已经是必不可少的一项技术。不管是大型科技互联网公司,还是线下消费实体店,社会各行各业都已进入大数据时代。 然而就在大数据快速发展的这几年,国内外涉及数据安全与个人隐私的舆情事件不断发生,涉及人们衣食住行的隐私泄露案频出。
1162 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载