《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](https://yqfile.alicdn.com/0275858614a242f3660306680bb85c4f8ee40a20.png)
(4)现在可以开始我们的例子了。
实现步骤
使用设备的GPS功能获取位置坐标、创建并初始化地图、显示当前位置的标记。
(1)为页面创建基本的HTML框架。
![a791d6b6c6e5b9260d3c75371b49ba79ed642b9f](https://yqfile.alicdn.com/a791d6b6c6e5b9260d3c75371b49ba79ed642b9f.png)
(2)在head标签中添加Google Maps API需要的JavaScript。将API key加入脚本中src属性的查询字符串中。
(3)接下来,添加对cordova-2.0.o.js的引用,并创建另一个JavaScript标签块,以存放自定义代码。
![c489035ec1f6ef35cc8fa886dff2cf47c9e6f0e5](https://yqfile.alicdn.com/c489035ec1f6ef35cc8fa886dff2cf47c9e6f0e5.png)
(5)下一步,创建onSuccess函数,访问position对象返回的位置信息。
(6)根据从设备位置传感器获取到的latitude和longitude信息,创建latLng对象,在组件初始化时将其传入Map对象。
(7)设置Map选项,将设置的latlLng变量的值作为地图的中心。Google Map控件在转换到移动设备屏幕上时可能会出现异常,尤其在可用性方面。用户可以自定义需要使用的控件。本例中使用zoomControl控件而不使用panControl控件。
(8)为定义Map对象,需引用一个div元素,并传递给之前定义的mapOptions变量。
(9)为关闭该方法,下面创建marker变量显示latLng对象表示的精确位置。
![79c022ef96bb62925d2cc192e2a2f72c63668dc7](https://yqfile.alicdn.com/79c022ef96bb62925d2cc192e2a2f72c63668dc7.png)
(10)为确保对返回的错误都能正确处理,下面创建onError方法,它将根据div元素内的错误码显示对应的字符串消息。
![c5c1023b3f577a363e93845b417bae693f551a81](https://yqfile.alicdn.com/c5c1023b3f577a363e93845b417bae693f551a81.png)
(11)在body标签中导入显示地图的div元素。
![f25b86450bc2180847416664c37a637d9edcfa3f](https://yqfile.alicdn.com/f25b86450bc2180847416664c37a637d9edcfa3f.png)
实现原理
多亏开放的绘制服务,比如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](https://yqfile.alicdn.com/692791591ed7ef32b4e38b43b85185190cae25c3.png)
从中可以看到,通过运用Static Maps API,此处仅仅使用了一个图像资源,将坐标、图像大小及其他数据作为参数,比之前代码中创建坐标、地图及标签的操作要简单得多。
虽然使用Static Map API会使得程序失去用户对动态地图的交互性,然而整个服务会变得简单许多,要求的代码量也会大量减少
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
相关文章
- 微信应用号(小程序)资源汇总(1010更新)
- python开发应用-本地数据获取方法
- iOS开发UI篇—ios应用数据存储方式(归档)
- 大数据应用之Windows平台Hbase客户端Eclipse开发环境搭建
- Knockout应用开发指南 第六章:加载或保存JSON数据
- 大数据应用向前一步是什么
- Knockout应用开发指南 第六章:加载或保存JSON数据
- 深入了解Struts2返回JSON数据的原理及具体应用范例
- 74. SAP UI5 应用使用 OData V4 显示 Table 表格数据的一个陷阱
- 19. SAP UI5 应用开发教程之十九 - SAP UI5 数据类型和复杂的数据绑定
- SAP UI5 应用开发教程之九十六 - SAP UI5 列表控件分页显示数据时,如何自定义分页大小试读版
- SAP UI5 应用开发教程之九十三 - 基于 JSONModel 数据模型的列表控件显示数据的深入讨论试读版
- 在SAP WebIDE里使用Fiori Elements快速开发SAP UI5应用
- SAP UI5 应用开发教程之九十六 - SAP UI5 列表控件分页显示数据时,如何自定义分页大小试读版
- SAP UI5 应用开发教程之八十六 - 动手开发一个最简单的本地 Mock 数据服务器试读版
- 使用 SAP Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据
- BigData:大数据开发的简介、核心知识(linux基础+Java/Python编程语言+Hadoop{HDFS、HBase、Hive}+Docker)、经典场景应用之详细攻略
- Dataset之JFT:JFT/FastEval14k数据集的简介、下载、案例应用之详细攻略
- 实战案例丨ModelArts在数据标注、数据过滤上的应用技巧:自动分组
- 【Android 逆向】Android 进程注入工具开发 ( Visual Studio 开发 Android NDK 应用 | Visual Studio 中 SDK 和 NDK 安装位置 )
- 5G三大应用场景
- 【iOS与EV3混合机器人编程系列之三】编写EV3 Port Viewer 应用监測EV3port数据
- 【2023最新教程】从0到1构建移动端应用自动化测试(建议收藏)
- RFSoC应用笔记 - RF数据转换器 -06- RFSoC关键配置之RF-ADC内部解析(四)
- jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)
- python工具方法 26 应用于图像分类的mixup与cutmix数据混合增强方式实现
- Qt数据库应用7-导出打印QTableWidget/QTableView数据
- 应用存储和持久化数据卷:存储快照与拓扑调度
- rsync+inotify 数据实时同步介绍与 K8s 实战应用