1)使用地理定位:

通过navigator.geolocation访问地理定位功能,返回一个Geolocation对象;

1.1)Geolocation对象成员:

getCurrentPosition(callback,errorCallback,options)——获取当前位置;

watchPosition(callback,error,options)——开始监控当前位置;

clearWatch(id)——停止监控当前位置;

1.1.1)浏览器调用getCurrentPosition的callback函数的参数时,会传入一个提供位置详情的position对象;

position对象成员:

coords——返回当前位置的坐标,即Coordinates对象;

timestamp——返回获取坐标信息的时间;

Coordinates对象成员:

latitude——返回用十进制表示的纬度;

longitude——返回用十进制表示的经度;

altitude——返回用米表示的海拔高度;

accuracy——返回用米表示的坐标精度;

altitudeAccuracy——返回用米表示的海拔精度;

heading——返回用度表示的行进方向;

speed——返回用米/秒表示的行进速度;

2)处理地理定位错误:

getCurrentPosition(callback,errorCallback,options)方法的第二个参数,它让我们可以指定一个函数,在获 取位置发生错误时调用它。此函数会获得一个PositionError对象;

PositionError对象成员:

code——返回代表错误类型的代码;

=1——用户未授权使用地理定位功能;

=2——不能确定位置;

=3——请求位置的尝试已超时;

message——返回描述错误的字符串;

3)指定地理定位选项:

getCurrentPosition(callback,errorCallback,options)方法提供的第三个参数是一个PositionOptions对象。

PositionOptions对象的成员:

enableHighAccuracy——告诉浏览器我们希望得到可能的最佳结果;

timeout——限制请求位置的事件,设置多少毫秒后会报告一个超时错误;

maximumAge——告诉浏览器我们愿意接受缓存过的位置,只要它不早于指定的毫秒数;

4)监控位置:

watchPosition方法不断获得关于位置的更新。所需参数与getCurrentPosition方法相同,工作方式也一样。

区别在于:随着位置发生改变,回调函数会被反复地调用。

table{

border-collapse: collapse;

}

th,td{

padding: 4px;

}

th{

text-align: right;

}

经度:

-

纬度:

-

海拔高度:

-

坐标精度:

-

海拔精度:

-

行进方向:

-

速度:

-

时间:

-

错误类型:

-

错误信息

-

Cancel Watch

var options={

enableHighAccuracy:false,

timeout:2000,

maximumAge:30000

}

var WatchID=navigator.geolocation.watchPosition(displayPosition,handleError,options)

document.getElementById(pressme).οnclick=function(e){

navigator.geolocation.clearWatch(WatchID);

}

function displayPosition(pos){

var properties=[longitude,latitude,altitude,accuracy,altitudeAccuracy,heading,speed];

for(var i=0;i

手机端html使用地理定位,html5之使用地理定位相关推荐

  1. 华为手机丢失定位网站_手机端网站优化要从网站的设计和定位开始入手

    移动端网站优化要从网站的设计和定位开始入手,重要的是简洁易用,切忌复杂,令用户搞不明白找不到想用的.对于搜索引擎而言,好的用户访问体验也是排名的最佳标准.下面小编就来分析一下设计对手机端网站优化排名的 ...

  2. 手机端与pc端页面html5,浅谈pc和移动端的响应式的使用

    身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早 ...

  3. h5手机端或PC端利用高德地图获取当前定位位置

    踩的坑写在前面: 想直接利用h5的特性来获取,但是一直报错,需要https服务,结果还去了阿里云搞ssl的域名卡住了,然后一直报未检测到DNS配置记录,如果你们服务是https就可以直接用这个了. 后 ...

  4. 手机端剪切图片插件 php,html5移动端上传图片裁剪插件

    特效描述:html5移动端 上传图片 裁剪插件.html5移动端图片裁剪.支持缩放. 代码结构 1. 引入JS 2. HTML代码 选择图片 使用 window.addEventListener(&q ...

  5. app小程序手机端Python爬虫实战07UiSelector通过resourceId、层级定位方式

    作者:虚坏叔叔 博客:https://xuhss.com 早餐店不会开到晚上,想吃的人早就来了!

  6. 移动端html5广告的优势,h5手机端开发的优势都有哪些呢

    原标题:h5手机端开发的优势都有哪些呢 现在是手机不离手的时代,可以说每个人都有一部甚至两部手机来打发日常的空余时间,那么你知道h5手机端开发的优势都有哪些吗?下面原创先锋小编给大家详细介绍下,想要了 ...

  7. 关于手机端CSS Sprite图标定位的一些领悟

    今天在某个群里面闲逛,看见一个童鞋分享了一个携程的移动端的页面. 地址这里我也分享下吧:http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标 ...

  8. 基于高德地图JsAPI进行浏览器精确定位,实现手机端考勤打卡功能

    前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...

  9. 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计...

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

最新文章

  1. dedecms channel php,织梦标签代码Channel标记怎么用
  2. 【设计模式】享元模式 实现 ( 实现流程 | 抽象享元类 | 具体享元类 | 享元工厂 | 用户调用 | 代码模板 )
  3. rmmod: can't change directory to '3.4.39': No such file or directory 解决方法
  4. Java:集合for高级循环遍历
  5. linux替换windows回车,转载 vi替换windows换行符为linux换行符
  6. Adobe illustrator 排版后图形导出 - 连载 3
  7. java 水表识别_水表识别 --数字的分割
  8. 在Linux中实现https访问站点
  9. 导购效果跟踪: SPM
  10. 倒角距离(Chamfer distance)和earth mover‘s diatance
  11. 蓝桥杯 BASIC-9 基础练习 特殊回文数
  12. hashmap储存有向图_HashMap的存储结构及原理
  13. 堆插入和删除的简单实现
  14. 打印机驱动兼容问题导致打印乱码
  15. 为wpf中的DataGrid控件添加鼠标单击事件
  16. 如何获取阿里云免费的SSL证书
  17. java-POI的Excel默认字体和样式
  18. 基金申请-1:基金委网站文件上传发生未知错误怎么办?
  19. 74HC165并转串级联芯片学习记录
  20. 软件园三区VR虚拟漫游实训项目规划

热门文章

  1. html5 如何设置导航,HTML5导航标签正确用法
  2. linux ip to int,linux ip选项处理(二)
  3. 用python玩转数据测试答案_大学慕课2020用Python玩转数据章节测试答案
  4. 【数据库基础知识】oracle client安装及配置
  5. 例子---PHP与Form表单之三
  6. 例子---纯CSS实现加载球
  7. 深度linux系统反复重启,修复启动
  8. java io 机器名_java IO最让初学者误解的取名方式
  9. linux yum c 11,CentOS YUM源安装 GVM-11 (一)
  10. c# mysql 链接池溢出_C#MySQL连接池限制,并清理连接