首页 技术 正文
技术 2022年11月16日
0 收藏 538 点赞 3,394 浏览 2377 个字

 这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下:

void getCurrentPosition(in PositionCallback successCallback,
in optional PositionErrorCallback errorCallback,
in optional PositionOptions options);

 标签: jQuery Mobile 

[全屏查看所有代码]

1. [代码][JavaScript]代码

?

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 <!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <meta name="viewport" content="width = device-width; initial-scale=1">        <title>GeoLocation API演示程序</title>        <link rel="stylesheet" href="jquery.mobile.css" />        <script src="jquery.min.js"></script>        <script src="jquery.mobile.min.js"></script>                 <script type="text/javascript">      function startgps()      {        var gps = navigator.geolocation;        if (gps)        {            gps.getCurrentPosition(showgps,                                 function(error)                                 {                                        alert("Got an error, code: " + error.code + " message: "+ error.message);                                 },                                 {maximumAge: 10000}); // 这里设置超时为10000毫秒,即10秒                }                else                {                    showgps();                }            }                   function showgps(position)      {                if (position)                {                    var latitude = position.coords.latitude;                    var longitude = position.coords.longitude;                    alert("latitude: " + latitude + "\r\n longitude: "+ longitude);                }                else                    alert("position is null");      }  </script>             </head>     <body>        <section class="ui-page ui-body-c ui-page-active" data-url="page1" id="page1" data-role="page">            <header role="banner"    class="ui-bar-a ui-header" data-role="header">                <h1 aria-level="1" role="heading"    tabindex="0" class="ui-title">GeoLocation API Demo</h1>            </header>            <div role="main" data-role="content" class="ui-content">                <input type="button" value="我的位置" onclick="startgps()"/>            </div>            <footer role="contentinfo" class="ui-bar-a ui-footer" data-role="footer">                <h1 aria-level="1" role="heading"    tabindex="0" class="ui-title">Allan Yan</h1>            </footer>        </section></html>

2. [图片] IMG_0073.PNG

jQuery Mobile + HTML5 获取地理位置信息

3. [图片] IMG_0074.PNG

jQuery Mobile + HTML5 获取地理位置信息举报

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,033
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,520
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,368
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,148
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,781
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,862