geolocation.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. var watchId;
  12. function geoInf( position ) {
  13. var str = "";
  14. str += "地址:"+position.addresses+"\n";//获取地址信息
  15. str += "坐标类型:"+position.coordsType+"\n";
  16. var timeflag = position.timestamp;//获取到地理位置信息的时间戳;一个毫秒数;
  17. str += "时间戳:"+timeflag+"\n";
  18. var codns = position.coords;//获取地理坐标信息;
  19. var lat = codns.latitude;//获取到当前位置的纬度;
  20. str += "纬度:"+lat+"\n";
  21. var longt = codns.longitude;//获取到当前位置的经度
  22. str += "经度:"+longt+"\n";
  23. var alt = codns.altitude;//获取到当前位置的海拔信息;
  24. str += "海拔:"+alt+"\n";
  25. var accu = codns.accuracy;//地理坐标信息精确度信息;
  26. str += "精确度:"+accu+"\n";
  27. var altAcc = codns.altitudeAccuracy;//获取海拔信息的精确度;
  28. str += "海拔精确度:"+altAcc+"\n";
  29. var head = codns.heading;//获取设备的移动方向;
  30. str += "移动方向:"+head+"\n";
  31. var sped = codns.speed;//获取设备的移动速度;
  32. str += "移动速度:"+sped;
  33. console.log(JSON.stringify(position));
  34. outLine( str );
  35. }
  36. function getPos() {
  37. outSet( "获取位置信息:" );
  38. plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
  39. outSet( "获取位置信息失败:"+e.message );
  40. }, {geocode:false} );
  41. }
  42. function watchPos() {
  43. if ( watchId ) {
  44. return;
  45. }
  46. watchId = plus.geolocation.watchPosition( function ( p ) {
  47. outSet( "监听位置变化信息:" );
  48. geoInf( p );
  49. }, function ( e ) {
  50. outSet( "监听位置变化信息失败:"+e.message );
  51. }, {geocode:false} );
  52. }
  53. function clearWatch() {
  54. if ( watchId ) {
  55. outSet( "停止监听位置变化信息" );
  56. plus.geolocation.clearWatch( watchId );
  57. watchId = null;
  58. }
  59. }
  60. // 通过定位模块获取位置信息
  61. function getGeocode(){
  62. outSet( "获取定位位置信息:" );
  63. plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
  64. outSet( "获取定位位置信息失败:"+e.message );
  65. },{geocode:true});
  66. }
  67. </script>
  68. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  69. </head>
  70. <body>
  71. <br/>
  72. <ul class="dlist">
  73. <li class="ditem" onclick="getPos()">获取设备位置信息</li>
  74. <li class="ditem" onclick="watchPos()">监听设备位置信息</li>
  75. <li class="ditem" onclick="clearWatch()">停止监听</li>
  76. </ul>
  77. <br/>
  78. <div class="button" onclick="getGeocode()">获取定位信息</div>
  79. <p class="des">
  80. Android平台推荐配置高德或百度定位,避免在部分设备(如三星、HTC等)可能无法获取位置信息的问题。
  81. </p>
  82. <div id="outpos"/>
  83. <div id="output">
  84. Geolocation可获取设备位置信息,包括经度、纬度、高度等信息。
  85. </div>
  86. </body>
  87. </html>