• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > H5之11__GeoLocation 地理定位

H5之11__GeoLocation 地理定位

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含H5,GeoLocation,地理定位等相关知识,匿名希望在学习及工作中可以帮助到您
GeoLocation API 通常用于移动设备获取地理位置,严格来说,它并不属于H5的标准规范.


一 如何使用 GeoLocation API?

要使用该API, 通过window.navigator.geolocatio 获得 对地理定位的访问。 该对象有如下三个方法:

1. getCurrentPosition()

2. watchPosition()

3. clearWatch()


getCurrentPosition()方法 可以传递三个参数, 如下所示:

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

其中第一个参数为必选参数,后面两个为可选参数

看一个示例:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>GeoLocation API 地理定位</title>
    <script type="text/javascript">
    	
   		
   		window.navigator.geolocation.getCurrentPosition(function(pos){
   			alert("当前地理位置的纬度: " +pos.coords.latitude
   			+"\n当前地理位置的经度: " +pos.coords.longitude
   			+ "\n当前经纬度的精度: " +pos.coords.accuracy
   			+ "\n设备的当前运动方向: " +pos.coords.heading
   			+ "\n设备的当前速度: " +pos.coords.speed
   			);
   			
   		});
   		
   		var watchID= window.navigator.geolocation.watchPosition(function(pos){
   			alert("当前位置变化的纬度: " +pos.coords.latitude
   			+"\n当前位置变化的经度: " +pos.coords.longitude
   			+ "\n当前经纬度变化的精度: " +pos.coords.accuracy
   			+ "\n设备的当前运动方向: " +pos.coords.heading
   			+ "\n设备的当前变化的速度: " +pos.coords.speed);
   			
   			navigator.geolocation.clearWatch(watchID);
   		}, function(){
   		});
    </script>
</head>
<body>
	
</body>
</html>


调用getCurrentPosition() 成功后,回调的函数中,可以通过其中的参数对象, 获得当前用户访问Web 页面时的地理位置信息


pos 对象包含一个coords 属性, coords 属性表示一系列的地理坐标信息.

latitude: 纬度 (十进制)

longitude: 经度(十进制)

altitude: 高度

acuracy: 经纬度坐标的精度 (米为单位)

altitudeAccuracy: 以米为单位的高度坐标精度水平

heading: 运动的方向 (通过相对正北做顺时针旋转的角度指定)

speed: 当前地面速度(m/s 为单位)

pos 还包含一个 timestamp 属性,该属性用于返回 coords 对象时以毫秒为单位创建时间戳。


效果图如下:


以上就是H5之11__GeoLocation 地理定位的内容,更多相关内容请关注微课江湖()!

您可能想查找下面的文章:

  • 详解HTML5之pushstate、popstate操作history,无刷新改变当前url
  • HTML5各种头部meta标签的功能(推荐)
  • 如何用H5实现一个触屏版的轮播器的实例
  • H5新属性audio音频和video视频的控制详解(推荐)
  • HTML5页面音视频在微信和app下自动播放的实现方法
  • H5 meta小结(前端必看篇)
  • 浅谈h5自定义audio(问题及解决)
  • h5调用摄像头的实现方法
  • HTML5单页面手势滑屏切换原理
  • Html5实现二维码扫描并解析

相关文章

  • 2018-12-03微信的H5页面调用第三方位置导航
  • 2018-12-03HTML5 canvas 9绘制图片实例详解
  • 2018-12-03html5拖曳操作 HTML5实现网页元素的拖放操作_html5教程技巧
  • 2018-12-03HTML5 与 XHTML2的区别
  • 2018-12-03有关基础模板的课程推荐
  • 2018-12-03html5规定元素的上下文菜单属性contextmenu
  • 2018-12-03利用HTML5 Canvas API绘制矩形的超级攻略_html5教程技巧
  • 2017-08-06html5小技巧之通过document.head获取head元素
  • 2018-12-03html5记忆翻牌游戏实现思路及代码_html5教程技巧
  • 2018-12-03HTML5 离线应用之打造零请求、无流量网站的解决方法_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 上周朋友圈被传奇世界H5破1500流水刷屏了,求千万爆款H5游戏背后的成功秘诀?
    • 如何用HTML5在页面中插入可自动播放的视频
    • SVG基础|SVG和CSS联样式表
    • html5实现一个简单的多人飞机游戏实例详解
    • HTML页面中添加Canvas标签示例
    • HTML5 FormData用法详解以及文件上传实现过程讲解
    • Html5百叶窗效果的代码
    • HTML5编程实战之三-图片文本(txt)拖拽预览实现代码
    • Web 前端分为哪几个大方向,工资待遇如何,辛苦吗?
    • 介绍几个超炫酷的HTML5动画演示及源码的图文详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有