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

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所示。

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

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

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

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

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

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

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

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

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

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

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

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

实现原理
多亏开放的绘制服务,比如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函数的一个修订,获取到位置信息后将会运行。

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

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

时间: 2024-12-28 21:59:09

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

《PhoneGap移动应用开发手册》——导读

目 录 第1章 移动与定位:使用加速计和位置传感器 1.1 简介 1.2 使用加速计检测设备的移动 1.3 调整加速计传感器更新时间间隔 1.4 通过加速计事件更新对象的显示位置 1.5 获取设备位置传感器信息 1.6 调整位置传感器更新时间间隔 1.7 根据位置坐标检索地图数据 1.8 创建可视化罗盘显示设备的移动方向 第2章 文件系统.存储及本地数据库 第3章 处理音频.图像和视频 第4章 处理通讯录 第5章 本地事件 第6章 使用XUI 第7章 使用jQuery Mobile进行用户界面开

《PhoneGap移动应用开发手册》——1.4节通过加速计事件更新对象的显示位置

1.4 通过加速计事件更新对象的显示位置 PhoneGap移动应用开发手册 开发者可以利用加速计传感器及其持续更新实现诸多功能,如运动监视游戏和更新屏幕上对象的位置. 实现步骤 下面将通过设备加速计传感器的持续更新,移动屏幕上的元素,作为设备移动的反应.该功能通过如下步骤实现. (1)创建HTML初始化框架.在head标签添加cordova JavaScript引用以导入需求的库. (2)在body标签中创建两个div元素.将其中第一个的id属性设置为点,作为在设备屏幕上移动的元素. (3) 第

《PhoneGap移动应用开发手册》——1.2节使用加速计检测设备的移动

1.2 使用加速计检测设备的移动PhoneGap移动应用开发手册加速计可捕捉设备在x,y,z这3个空间轴上的移动.加速计是一种移动传感器,它能检测当前设备位置的相对移动变化. 实现步骤使用PhoneGap API提供的加速计相关函数检测设备的反馈信息. (1)首先,创建HTML初始化框架,并添加需求脚本文件cordova-2.0.0.js的引用. 通过http://www.packtpub.com.网站购买Packet相关书籍的用户,可以下载已购买书籍的示例代码.其他读者可以访问网站http:/

《PhoneGap移动应用开发手册》——1.8节创建可视化罗盘显示设备的移动方向

1.8 创建可视化罗盘显示设备的移动方向PhoneGap移动应用开发手册PhoneGap API向开发者提供了获取设备的坐标信息及前进方向信息.开发者可以利用这些信息自定义一个罗盘工具来显示设备的移动. 实现步骤(1)创建HTML初始化框架,并添加需要脚本文件cordova-2.0.0.js的引用. (2)本例将以类名的方式调用DOM中的特定元素.为此我们使用XUI JavaScript库 (http://xuijs.com/).在head标签中添加script的引用包含该库. (3)创建scr

《PhoneGap移动应用开发手册》——1.6节调整位置传感器更新时间间隔

1.6 调整位置传感器更新时间间隔PhoneGap移动应用开发手册使用getCurrentPosition方法,可以获取以GPS坐标表示的设备位置.本例中,通过设定的间隔持续获取更新信息,以获取当前位置. 实现步骤通过传递一个包含多个参数的可选项,设置时间间隔,提高精确度. (1)创建HTML初始化框架,并添加需求的cordova- 2.0.0.js文件. (4)现在添加onDeviceReady函数执行startWatch方法,代码如下. (5)创建startWatch函数.首先,创建opti

《PhoneGap移动应用开发手册》——1.5节获取设备位置传感器信息

1.5 获取设备位置传感器信息PhoneGap移动应用开发手册位置和使用全球卫星定位系统(GPS)功能,可以使开发者创建动态的实时地图绘制.定位及跟踪应用程序.使用位置的一些方法可以获取位置感知应用程序所需要的信息和属性.只要用户连接到网络(通过移动数据业务或者WIFI),就可以从位置传感器获取其位置信息. 实现步骤使用PhoneGap API的位置功能监视设备的反馈信息,获取相关的位置信息. (1)创建HTML初始化框架,并添加需求脚本文件cordova-2.0.0.js的引用. (2)在Co

《PhoneGap移动应用开发手册》——1.3节调整加速计传感器更新时间间隔

1.3 调整加速计传感器更新时间间隔PhoneGap移动应用开发手册getCurrentAcceleration函数只是获取当它被调用的那个时间点的加速计数据,一次调用返回一个响应对象.本例中将设计一个程序可以设定时间间隔以从加速计持续获取其更新,以监视设备的持续运动. 实现步骤通过对PhoneGap API中的一个可用方法提供另外的参数以设置更新时间间隔. (1)首先,创建HTML初始化框架,并添加需要脚本文件cordova-2.0.0.js的引用. (5)创建startWatch函数.首先,

《PhoneGap移动应用开发手册》——1.1简介

1.1 简介PhoneGap移动应用开发手册随着技术发展,移动设备早已不局限于收发短信和邮件这些简单的功能.它们还可以借助位置传感器.加速计传感器及其他传感器,帮助用户导航和定位. 本章将介绍如何使用PhoneGap API来访问这些传感器,并在应用程序中充分利用这些传感器的功能.

《iOS 6核心开发手册(第4版)》——1.6节秘诀:测试触摸

1.6 秘诀:测试触摸 iOS 6核心开发手册(第4版) 屏幕上用于直接操作界面的大多数视图元素都不是矩形.这使触摸检测变得复杂,因为实际的视图矩形的某些部分可能不对应于实际的触摸点.图1-2显示了实际发生的问题.右边的截屏图显示了界面及其基于触摸的子视图,左边的截屏图则显示了每个子视图的实际视图界限.每个屏幕上的圆形周围的淡灰色区域都落在界限内,但是对这些区域的触摸应该不会"碰到"正在处理的视图. iOS会在整个视图框架内感知用户点按.这包括未绘图的区域(比如图1-2中的实际圆形外面