第六讲 PhoneGap Geolocation 获取地理位置 api

学习要点:

1. PhoneGap  Geolocation 对象介绍

2. geolocation.getCurrentPosition

3. 主要对象描述

4. 获取地理位置信息

5. 动态获取地理位置信息

6. 综合案例说明

一、 PhoneGap  Geolocation 对象介绍 

使应用程序可以访问地理位置信息。geolocation 对象提供了对设备 GPS 传感器的访问。Geolocation 提供设备的位置信息,例如经度和纬度。位置信息的常见来源包括全球定位系统(GPS),以及通过诸如 IP 地址、RFID、WiFi 和蓝牙的 MAC 地址、和 GSM/CDMA 手机 ID 的网络信号所做的推断。不能保证该 API 返 回的是设备的真实位置信息。这个 API 是基于 W3C Geo location API Specification 实现的。有些设备已经提供 了对该规范的实现,对于这些设备采用内置实现而非使用 PhoneGap 的实现。对于没有地理位置支持的设 备,PhoneGap 提供了统一的支持。

方法

geolocation.getCurrentPosition

geolocation.watchPosition

geolocation.clearWatch

参数

geolocationSuccess

geolocationError

geolocationOptions

二、 geolocation.getCurrentPosition

返回设备的当前位置,一个位置对象。

navigator.geolocation.getCurrentPosition(geolocationSuccess,
[geolocationError],
[geolocationOptions]); 参数
geolocationSuccess:通过当前位置的回调。 geolocationError:(可选)如果发生错误,执行的回调。
geolocationOptions:(可选)获取地理位置的选项,例如获取频率。它一般作为一个 JSON 对象,目前可设 置的属性如下

geolocationOptions{

enableHighAccuracy:提供一个表明应用程序希望获得最佳可能结果的提示。

timeout:允许的以毫秒为单位的最大时间间隔,该时间间隔是从 geolocation.getCurrentPosition 或 geolocation.watchPosition 的调用到相应的 geolocationSuccess 回调函数被调用,单位是毫秒。

maximumAge:保留上次缓存的最长时间,单位是毫秒。可以理解为获取地理位置信息的频率 注意: 除非 enableHighAccuracy 选项被设定为 true,否则 Android 2.X 模拟器不会返回一个地理位置结果 例如:{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
}

三、 主要对象描述

1.Position

包含由 geolocation API 创建的 Position 坐标信息。 coords:一系列地理坐标。(Coordinates 类型) timestamp:以毫秒为单位的 coords 的创建时间戳。

2.PositionError
当发生错误时,一个 PositionError 对象会传递给 geolocationError 回调函数。
code:一个在下面常量列表中定义的错误代码。 message:说明错误细节的错误信息。
PositionError.PERMISSION_DENIED:权限被拒绝 PositionError.POSITION_UNAVAILABLE:位置不可用 PositionError.TIMEOUT:超时

3. Coordinates 一系列用来描述位置的地理坐标信息的属性。
latitude:以十进制表示的纬度。 longitude:以十进制表示的经度。 altitude:位置相对于椭圆球面的高度,单位为米。 海拔高度 accuracy:以米为单位的纬度和经度坐标的精度水平。altitudeAccuracy:以米为单位的高度坐标的精度水平。 heading:运动的方向,通过相对正北做顺时针旋转的角度指定。speed:以米/秒为单位的设备当前地面速 度。

注意: altitudeAccuracy: Android 设备上不支持该属性,返回值总是 null

四、获取地理位置信息 

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Geolocation 例子</title>  
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
<script type="text/javascript" charset="utf-8">  
    // 等待 PhoneGap 加载 
    document.addEventListener("deviceready", onDeviceReady, false);  
    // 加载完成 
    function onDeviceReady() { 
         navigator.geolocation.getCurrentPosition(onSuccess, onError); 
    }  
    // onSuccess 回调函数     //  接收包含当前地理位置坐标信息的 Position 对象 
    function onSuccess(position) { 
         var element = document.getElementById('geolocation'); element.innerHTML = '纬度: '           + position.coords.latitude              + '<br />' +                             '经度: '          + position.coords.longitude             + '<br />' +                             '海拔高度: '           + position.coords.altitude              + '<br />' 
+                             '精确度: '           + position.coords.accuracy              + '<br />' +                             '海拔高度精确度: '  + position.coords.altitudeAccuracy      + '<br />' +                             '运动方向: '            + position.coords.heading               + '<br 
/>' +                             '速度: '              + position.coords.speed                 + '<br />' 
+                             '时间戳: '          + new Date(position.timestamp)          + '<br />'; 
    }  
    // onError 回调函数,接收包含具体错误信息的 PositionError 对象 
    function onError(error) {         alert('错误代码: '    + error.code    + '\n' +               '详细信息: ' + error.message + '\n'); 
    }  
  </script> 
</head> 
<body> 
<p id="geolocation">定位中。。。</p> 
</body> 
</html>

五、 动态获取地理位置信息

1. geolocation.watchPosition 定期获取设备的地理位置信息

navigator.geolocation.watchPosition(onSuccess, onError, options);

2. navigator.geolocation.clearWatch 停止定期获取设备的地理位置信息

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Geolocation 例子</title> 
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
<script type="text/javascript" charset="utf-8">  
    //等待 PhoneGap 加载 
document.addEventListener("deviceready", onDeviceReady, false);  
varwatchID = null;  
    //加载完成 
    function onDeviceReady() { 
        // Update every 3 seconds 
var options = { frequency: 3000 }; 
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options); 
    }  
    // onSuccess 回调函数     //  接收包含当前地理位置坐标信息的 Position 对象 
    function onSuccess(position) { 
var element = document.getElementById('geolocation'); element.innerHTML = '纬度: '  + position.coords.latitude      + '<br />' +                             '经度: ' + position.coords.longitude     + '<br />' + 
                            '<hr />'      + element.innerHTML; 
    }  
    //取消获取地理位置信息 
    function clearWatch() { 
          if (watchID != null) { 
navigator.geolocation.clearWatch(watchID); 
watchID = null; 
        } 
    }  
    // onError 回调函数,接收包含具体错误信息的 PositionError 对象 
    function onError(error) { 
      alert('code: '    + error.code    + '\n' + 
            'message: ' + error.message + '\n'); 
    }  
</script> 
</head> 
<body> 
<p id="geolocation">监测地理位置信息中。。。</p> 
<button onclick="clearWatch();">取消监测地理位置信息</button> 
</body> 
</html>

六、 综合案例

在实际的开发中我们如何实现定位呢?

一般结合百度地图 api 或者谷歌的地图 api 实现

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} 
</style> 
<script type="text/javascript" 
src="http://api.map.baidu.com/api?v=2.0&ak=5a21b9801cac081f6473bafdc558c53a"></script> <title>反地址解析</title> 
</head> 
<body> 
<div id="allmap"></div> 
</body> 
</html> 
<script type="text/javascript">  
// 百度地图 API 功能 
var map = new BMap.Map("allmap"); 
  var point = new BMap.Point(116.331398,39.897445); 
map.centerAndZoom(point,12); 
var gc = new BMap.Geocoder();       
map.addEventListener("click", function(e){         
    var pt = e.point; 
    gc.getLocation(pt, function(rs){ 
        var addComp = rs.addressComponents; 
        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + 
addComp.streetNumber); 
    });         
}); </script>

第三讲 PhoneGap 设备信息、网络连接和通知 api

学习要点:

1. 设备信息

2. 网络连接

3. phonegap 通知

一、 设备信息

device.name 设备名称

device.cordova PhoneGap 版本

device.platform 设备平台

device.uuid uuid 编码

device.version 平台版本

<script type="text/javascript"> 
              $(document).ready(function(){    
                        document.addEventListener("deviceready", myDeviceReadyListener, false);  
              });    
              function myDeviceReadyListener(){   
                        $("#deviceName .ui-btn-text").text("设备名称" + device.name);  
                        $("#deviceCordova .ui-btn-text").text("PhoneGap 版本" + device.cordova);  
                        $("#devicePlatform .ui-btn-text").text("设备平台" + device.platform);  
                        $("#deviceUUID .ui-btn-text").text("uuid 编码" + device.uuid);   
                        $("#deviceVersion .ui-btn-text").text("平台版本" + device.version); 
                 }   
 </script> 
</head> 
<body>  
             <div data-role="page">   
                      <div data-role="header">    
                            <h1>PhoneGap 实战</h1>   
                      </div>   
                     <div data-role="content">    
                              <a href="#" data-role="button" id="deviceName"></a>    
                              <a href="#" data-role="button" id="deviceCordova"></a>    
                              <a href="#" data-role="button" id="devicePlatform"></a> 
                              <a href="#" data-role="button" id="deviceUUID"></a>    
                              <a href="#" data-role="button" id="deviceVersion"></a>   
                    </div>  
                    <div data-role="footer">   
                             <h4>&nbsp;</h4>   
                   </div>  
       </div> 
</body>

二、网络连接

Phonegap 网络连接通过 navigator.network.connection.type 来获取,一般有一下几种状态

1. Connection.UNKNOWN    未知连接

2. Connection.ETHERNET     以太网

3. Connection.WIFI         WiFi

4. Connection.CELL_2G    2G网络

5. Connection.CELL_3G     3G网络

6. Connection.CELL_4G     4G 网络

7. Connection.NONE       无网络连接

<!DOCTYPE html> 
<html> 
<head> 
<title>Device Properties Example</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
<script type="text/javascript" charset="utf-8">  
       document.addEventListener("deviceready", onDeviceReady, false);  
       function onDeviceReady() {         
              // 监听网络的变化         
             window.addEventListener("online", onOnline, false);         
             window.addEventListener("offline", onOffline, false);         
             // 检查网络连接         
             checkNetworkConnection();    
        }  
       function checkNetworkConnection() {         
             var states = {};         
            states[Connection.UNKNOWN]  = '未知连接';         
            states[Connection.ETHERNET] = '以太网';         
            states[Connection.WIFI]     = 'WiFi'; 
            states[Connection.CELL_2G]  = '2G 网络';         
            states[Connection.CELL_3G]  = '3G 网络';         
            states[Connection.CELL_4G]  = '4G 网络';         
            states[Connection.NONE]     = '无网络连接';         
            alert('网络连接类型: ' + states[navigator.network.connection.type]);     
       }  
       function onOnline() {         alert('您现在在线');     }  
       function onOffline() {         alert('您现在离线');     } 
</script>
</head> 
<body> 
        <p>检查网络类型的例子</p> <input type="button" value="检查网络" onClick="checkNetworkConnection()" /> 
</body>
</html>

三. 通知

notification.alert 提示对话框

notification.confirm 确认对话框

notification.prompt 该 notification.prompt 方法显示一个对话框,比本地浏览器的提 示功能更强大。

notification.beep 发出嘟嘟的声音

notification.vibrate 震动

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>PhoneGap-Notification</title> 
<link rel="stylesheet" href="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.css" /> 
<script src="../jquery.mobile-1.1.1/jquery.js"></script> 
<script src="../jquery.mobile-1.1.1/jquery.mobile-1.1.1.js"></script> 
<script type="text/javascript" charset="utf-8" src="../cordova-1.9.0.js"></script> 
<script type="text/javascript"> 
 $(document).ready(function(){ 
        document.addEventListener("deviceready", myDeviceReadyListener, false);  
 }); 

 function myDeviceReadyListener(){ 
         $("#NoAlert").click(function(){    navigator.notification.alert("这是一个提醒",function(){     console.log("确认了!");           },"标题","确认"); 

  }); 

  $("#NoConfirm").click(function(){    navigator.notification.confirm("请问你吃饭了吗?",function(info){              console.log("你选择了" + info);    },"请确认","吃了,没吃"); 
  }); 

  $("#NoBeep").click(function(){ 
            navigator.notification.beep(3); 
  }); 

  $("#NoVibrate").click(function(){ 
         navigator.notification.vibrate(3000); 
  }); 
 }  
</script> 
</head> 
<body> 
 <div data-role="page"> 
           <div data-role="header">    
                   <h1>PhoneGap 实战</h1> 
           </div> 
           <div data-role="content">    
                   <a href="#" data-role="button" id="NoAlert">弹出提示框</a>    
                   <a href="#" data-role="button" id="NoConfirm">弹出确认框</a>    
                   <a href="#" data-role="button" id="NoBeep">提示音</a>    
                   <a href="#" data-role="button" id="NoVibrate">震动</a> 
          </div> 
          <div data-role="footer"> 
                  <h4>&nbsp;</h4> 
          </div> 
 </div> 
</body> 
</html>

第一讲(下) PhoneGap目录结构介绍, eclipse html 插件的下载

学习要点:

1. PhoneGap 目录结构介绍

2. Eclipse html 编辑器插件下载安装

3. Phonegap 启动背景设置

4. Eclipse  android 环境连接手机调试

一、 Phonegap 目录结构介绍

Src 该目录包含了所有用户要创建的 Java 源文件

gen 为开发工具自动创建

assets 目录 用于方一些资源文件 css js html res 目录该目录包含了所有的资源文件 图表 图片 字符串 布局 它包含 drawable layout 和 valuse 目录

drawable 包含了所有的图片文件 layout 主要用于定义活动视图 UI 的布局 values 该资源文件主要和本地化有关 包含了 XML 文件存储的键值对

res/xml/config.xml 此文件刚开始没有 在其他地方拷贝过来的 也是配置文件

AndroidManifest.xml 这个文件是 Android 配置文件,列出了应用程序所提供的功能

(1)drawable-hdpi 里面存放高分辨率的图片,如 WVGA (480×800),FWVGA (480×854)

(2)drawable-mdpi 里面存放中等分辨率的图片,如 HVGA (320×480)

(3)drawable-ldpi 里面存放低分辨率的图片,如 QVGA (240×320)

二、 Eclipse html 编辑器插件下载安装 eclipse 中 html 编辑器插件的下载和安装

http://bbs.phonegap100.com/forum.php?mod=viewthread&tid=33

eclipse html 插件的下载和安装 需求:需要在 eclipse 里面编辑 html 和 jsp,语法高亮和语法提示,自动补全等。

1. 下载 GEF(依赖包):

http://www.eclipse.org/downloads/download.php?file=/tools/gef/downloads/drops/3.7.2/R201 201171043/GEF-ALL-3.7.2. zip

然后解压到 eclipse 安装目录替换 features 和 plugins 文件夹

20140814041958

 

2.下载 HTMLEditor

http://amateras.sourceforge.jp/cgi-bin/fswiki_en/wiki.cgi?page=EclipseHTMLEditor

只有一个 tk.eclipse.plugin.htmleditor_2.1.0.jar 文件 直接复制到 eclipse\plugins 里面

3.新建 html 文件

File->New->Other->Amateras->html

4.字体大小配置 

20140814042222

 

菜单栏里面点 Window->Preference->General->Appearance->Colors and Fonts,再在右边的框里 选 Java->Java Editor Text Font(overrides default:Text Font),然后再点右边的 Edit 按钮,编辑好了 点确定,再 OK 就行啦。。

三.phonegap 启动背景设置 

splash.PNG 拷贝到 res/drawable-mdpi/

super.setIntegerProperty(“loadUrlTimeoutValue”, 60000); 设置超时

android应用如果 6 秒还没有反映则认为是超时

super.onCreate(savedInstanceState);      
super.setIntegerProperty("splashscreen", R.drawable.splash_sn); 
super.setIntegerProperty("loadUrlTimeoutValue", 60000); // 3s后splash关闭 
super.loadUrl("file:///android_asset/www/index.html", 3000);

 四.Eclipse  连接真实机器调试, 如何让 android 程序 运行在手机上调试 

1.手机开启调试模式

2.安装 adb.exe 准备工作:

确信 \android-sdk-windows\tools\ 下有 adb.exe AdbWinApi.dll AdbWinUsbApi.dll 三 个 文 件 , 如 果 没 有 从 \android-sdk-windows\platform-tools\ 下面拷贝到 tools 下
windows 的话 进入\sdk\tools 目录 如下图执行安装

20140814042759

 

3.adb devices 命令产看设备是否显示如下图 

20140814042915

android 在使用 adb 命令时有时会发现设备的状态是 offline,解决方式如下:以下 方法请确保你的设备处于调试模式下。

方法一:执行 #adb kill-server #adb start-server #adb devices 看看设备是否还是处于 offline 状态,如果是,请尝试方法二

方法二: 重新启动设备,开机后,执行: #adb devices 如果设备还是 offline 请看方法三

方法三: 重启你的计算机吧。

如果正常显示: 运行您的程序 选择手机设备即可,如下图,看看您的手机上有没有运行您调试的 才程序

 

20140814043059

 

【下面列出了 Adb 常用命令操作命令】

1. 查看设备 adb devices 这个命令是查看当前连接的设备, 连接到计算机的 android 设备或者模拟器将会列 出显示

2.安装软件 adb install adb install <apk 文件路径> :这个命令将指定的 apk 文件安装到设备上

3. 卸载软件 adb uninstall <软件名> adb uninstall -k <软件名> 如果加 -k 参数,为卸载软件但是保留配置和缓存文件.

4. 进入设备或模拟器的 shell: adb shell 通过上面的命令,就可以进入设备或模拟器的 shell 环境中,在这个 Linux Shell 中, 你可以执行各种 Linux 的命令,另外如果只想执行一条 shell 命令,可以采用以下的方式: adb shell [command] 如:adb shell dmesg 会打印出内核的调试信息。

5. 发布端口 可以设置任意的端口号,做为主机向模拟器或设备的请求端口。如: adb forward tcp:5555 tcp:8000

6. 从电脑上发送文件到设备 adb push <本地路径> <远程路径> 用 push 命令可以把本机电脑上的文件或者文件夹复制到设备(手机)

7. 从设备上下载文件到电脑 adb pull <远程路径> <本地路径> 用 pull 命令可以把设备(手机)上的文件或者文件夹复制到本机电脑

8、查看 bug 报告 adb bugreport

9、记录无线通讯日志 一般来说,无线通讯的日志非常多,在运行时没必要去记录,但我们还是可以通过 命令,设置记录: adb shell logcat -b radio

10、获取设备的 ID 和序列号 adb get-product adb get-serialno adb shell sqlite3

第一讲快速搭建 PhoneGap 开发环境

说明: 此教程来自于PhoneGap 中文网主讲教师:张龙(树根) ,email: htzhanglong@foxmail.com ,官网: www.phonegap100.com. 极力推荐.

logo

学习要点:

1. JDK 下载以及安装
2. JDK 环境变量配置
3. Eclipse + ADTplugin+Android SDK 集成环境
ADT Bundle for Windows 安装

一、 JDK 下载以及安装

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

二、 JDK 环境变量配置

进行 java 开发,首先要安装 jdk,安装了 jdk 后还要进行环境变量配置:
1、 下载 jdk(http://java.sun.com/javase/downloads/index.jsp)
2、 安装 jdk   3、 配置环境变量:右击“我的电脑”–>”高级”–>”环境变量”

1) 在系统变量里新建 JAVA_HOME 变量,变量值为:C:\Program Files\Java\jdk1.7.0_17(根 据自己的安装路径填写) 

2) 新建 classpath 变量,变量值为:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

3) 在 path 变量(已存在不用新建)添加变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin (注意变量值之间用“;”隔开) %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\Sy stem32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files\Microsoft SQL Server\100\Tools\Binn\;C:\Program Files\Microsoft SQL Server\100\DTS\Binn\;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;C:\Program Files\TortoiseSVN\bin 

4、“开始”–>“运行”–>输入“javac”–>”Enter”,如果能正常打印用法说明配置成功!

补充环境变量的解析:  
JAVA_HOME:jdk 的安装路径  
classpath:java 加载类路径,只有类在 classpath 中 java 命令才能识别,在路径前加了个”.”表 示当前路径。  
path:系统在任何路径下都可以识别 java,javac 命令。

三、 Eclipse + ADT plugin+Android SDK 集成环境 ADT Bundle for Windows 安装

http://developer.android.com/sdk/index.html