定位 - Geolocation

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在应用中我们可以使用 Geolocation API 来获取到用户当前的位置,一般的智能手机上面都有 GPS 芯片,可以获得准备的位置,没有 GPS 芯片的设备也可以使用其它的参考值来获得用户的位置,比如使用 IP 地址,来获得用户的大概的位置。

在应用里,我们可以利用获取到的位置,比如显示在 Google 地图上,这样用户可以了解到自己当前的位置,或者去搜索附近的餐馆,商店等等。

使用这个位置功能,我们要先去安装一下 genlocation 插件 …

打开终端工具,Windows 用户可以使用命令行工具 … 进入到应用项目的目录 … cd desktop/hello

phonegap local plugin add https://git-wip-us.apache.org/res/asf/cordova-plugin-geolocation.git

index.js

然后打开应用的 index.js … 先去新建一个函数 … 叫它 getPosition: function() {},

在它的里面,可以使用 geolocation.getCurrentPosition 去获取位置信息 … 它属于 navigator 这个对象 …

navigator.geolocation.getCurrentPosition(app.geolocationSuccess);

然后再去定义 getCurrentPosition 的三个参数 …. 第一个参数是 geolocationSuccess … 就是成功获取到位置信息以后要做的事情 …

第二个参数是 geolocationError … 获得位置出现错误的时候要做的事情 … 最后一个参数是 geolocationOptions … 它是位置的一些选项 …

先定义第一个参数 … 我们可以叫它 geolocationSuccess … 在它前面加上一个 app ,表示去执行 app 对象里面的这个 geolocationSuccess 函数 …

其它的参数我们在后面的视频里再去介绍 … 因为除了 geolocationSuccess 以外,其它的参数都是可选的,所以在这里我们可以不用去定义他们 …

把这个 getPosition 放在 deviceReady 事件发生以后去执行 … 这样启动应用以后,就可以去获取位置信息 … app.getPosition()

geolocationSuccess

下面再去定义当成功获得位置信息以后要做的事情,就是这个 geolocationSuccess .. geolocationSuccess: function() {},

获取到的位置信息会放在 position 里面,我们可以把它传递给 geolocationSuccess 去处理 .. geolocationSuccess: function(position)

要访问获得的位置信息,可以这样做 … position.coords.latitude … 它会输出获取到的 latitude,也就是纬度的值 ….
把这个 latitude 改成 longitude.. 就会输出位置的经度的值 …

类似的还有海拔,速度等等 …. 这里我们先只用一个 longitude 还有 latitude … 其它的位置信息你可以搜索一下 w3c geolocation …

我们把这个经度和纬度信息输出到控制台上 …. 用一个 console.log()

console.log(
'纬度: '+ position.coords.latitude + '\n' +
'经度: '+ position.coords.longitude + '\n' +
);

这里的 \n 是换行的意思 … 保存 … 打开 weinre 调试工具的控制台 ….

测试

再打开终端工具 … 重新编译并且安装一下修改之后的应用 … phonegap run ios

在应用启动以后,弹出一个确认的对话框 … 提示是否允许应用使用位置服务 … 选择 允许 ...

然后在控制台上,你会看到获取到的纬度和经度的位置信息 … 因为我们用的是模拟器,所以这个位置信息并不是我的真实的位置 …

我们可以事先为 iOS 模拟器添加一些位置信息 … 打开 调试 - 位置 … 选择自定位置 … 可以手工去输入一个续度和经度值 …

或者,我们也可以在这个位置列表里选择一个事先定义好的位置 … 比如选择这个 Apple Stores …

关闭掉应用 … 按两下 Home 键 … 关掉应用 … 再重新打开应用 … 这样会重新获得位置信息 …

在控制台上,你会发现,位置信息发生了一些变化 … 现在的纬度和经度的位置应该就是 Apple Stores 的位置 ….

定位 - Geolocation《 PhoneGap 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点