HTML5 Geolocation(地理定位)用于定位用户的位置,并根据移动位置来获取实时的经纬度地理位置信息。使用getCurrentPosition() 方法可以获得用户的位置(经纬度),使用watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。

HTML5地理位置示例

如下面的例子:

关于例子的解释如下:

检测是否支持地理定位

如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。

如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象

showPosition() 函数获得并显示经度和纬度

处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

x.innerHTML="User denied the request for Geolocation."

break;

case error.POSITION_UNAVAILABLE:

x.innerHTML="Location information is unavailable."

break;

case error.TIMEOUT:

x.innerHTML="The request to get user location timed out."

break;

case error.UNKNOWN_ERROR:

x.innerHTML="An unknown error occurred."

break;

}

}

错误代码说明:

Permission denied - 用户不允许地理定位

Position unavailable - 无法获取当前位置

Timeout - 操作超时

在地图中显示结果

如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图:

function showPosition(position)

{

var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="

+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="

";

}

在上例中,我们使用返回的经纬度数据在谷歌地图中显示位置(使用静态图像)。

给定位置的信息

本页演示的是如何在地图上显示用户的位置。不过,地理定位对于给定位置的信息同样很有用处。

案例:

更新本地信息

显示用户周围的兴趣点

交互式车载导航系统 (GPS)

getCurrentPosition() 方法 - 返回数据

若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。

属性

描述

coords.latitude

十进制数的纬度

coords.longitude

十进制数的经度

coords.accuracy

位置精度

coords.altitude

海拔,海平面以上以米计

coords.altitudeAccuracy

位置的海拔精度

coords.heading

方向,从正北开始以度计

coords.speed

速度,以米/每秒计

timestamp

响应的日期/时间

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例(比如 iPhone):

Geolocation 对象实例

html5经纬度定位 源码_HTML5地理位置定位获取经纬度相关推荐

  1. html5经纬度定位 源码_HTML5教程 如何获取当前位置的经纬度

    本篇教程探讨了HTML5教程 如何获取当前位置的经纬度,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 是想让地图的定位用户位置更准确一些. 查看了介绍: h ...

  2. 获取地理位置php源码,百度地理位置定位的源码分享

    百度地理位置定位的源码分享 2016-06-07 11:37:29原创192百度地理位置定位的源码分享 实现百度定位 1. 使用APIclound IDE新建立一个项目,名称为定位: 2. 登陆API ...

  3. java室内定位 源码_android 室内定位 源码下载(蓝牙定位)

    [实例简介] [实例截图] [核心代码] package com.uestc.indoorlocation; import java.util.HashMap; import java.util.Li ...

  4. (完整项目源码)GPS定位源码整套管理系统,轨迹播放,车辆管理,电子围栏,报警记录,数据库/人员定位/宠物定位/物流跟踪/资产定位

    (完整项目源码)GPS定位源码整套管理系统,轨迹播放,车辆管理,电子围栏,报警记录,Mysql数据库- 框架:spring+jpa+struts2 ,MVC架构设计,可扩展性强. 数据库:mysql5 ...

  5. 三菱FX1N FX3U底层源码,PLC生产方案,定位源码

    三菱FX1N FX3U底层源码,PLC生产方案,定位源码 支持4轴脉冲输出,算法改进,处理效率较前大大提高. 定位源码分为3种版本 1.标准的寄存器版本,适合单片机高手使用者. 2.标准的库函数版本, ...

  6. v55.04 鸿蒙内核源码分析(重定位) | 与国际接轨的对外发言人 | 百篇博客分析HarmonyOS源码

    子张问善人之道.子曰:"不践迹,亦不入于室." <论语>:先进篇 百篇博客系列篇.本篇为: v55.xx 鸿蒙内核源码分析(重定位篇) | 与国际接轨的对外发言人 加载 ...

  7. 前端录屏+定位源码,帮你快速定位线上bug

    前言 如何快速定位线上bug,是多数开发者都会遇到的难题 web-see 前端监控方案,提供了 前端录屏+定位源码 方式,让bug无处藏身 这是前端监控的第二篇,该篇讲解如何实现错误还原功能,第一篇 ...

  8. 微信html5小游戏源码70种

    2019独角兽企业重金招聘Python工程师标准>>> 微信html5小游戏源码70种 http://download.csdn.net/detail/csdddn/9419955游 ...

  9. 分享一个很酷很炫的html5特效网站源码

    原创整理不易,转载请注明出处:分享一个很酷很炫的html5特效网站源码 代码下载地址:http://www.zuidaima.com/share/1784027301841920.htm 在线演示:h ...

  10. HTML5飞机大战源码下载

    原文:HTML5飞机大战源码下载 源代码下载地址:http://www.zuidaima.com/share/1735919460830208.htm

最新文章

  1. Linux的iptables在指定的防火墙规则序号前添加防火墙规则
  2. map怎么转化dto_java实现Object和Map之间的转换3种方式
  3. qt之qml开发优缺点_linux配置vlc-qt
  4. NAB 2019见闻:CAE视频编码与QoE
  5. mysql字符乱码百度_如何解决MySQL字符集乱码问题
  6. 博士毕业论文悲情致谢引女友回应:学术是一场超越金钱的修行
  7. mysql 数据删除 索引_MySQL操作之索引创建与删除
  8. 通过layout进行适配遇到的一点小问题及解决方案
  9. windows远程Linux
  10. 思想一碰就冒火: 开源贡献须耐心, 选择框架要谨慎
  11. 微信小程序之:小程序接入高德地图SDK
  12. java实现解压war_java文件操作之war压缩解压
  13. 【转】汇编指令与机器码的相互转换
  14. DOSBox安装流程
  15. 宁宛 机器人_.001 忠犬机器人
  16. 网站收录的是域名还是服务器,网站备案的到底域名还是服务器?
  17. Android系统五层架构
  18. Spring的ioc控制反转
  19. Android百度AI植物识别教程,微信开发+百度AI学习:植物识别(示例代码)
  20. 搜索引擎蜘蛛 ajax,了解搜索引擎蜘蛛习性 助力内页顺畅收录

热门文章

  1. android u盘检测工具,android U盘检测及获取内存储器信息
  2. 潘多拉网吧防火墙 1.0 双线破解
  3. MATLAB GUI编程总结
  4. 基于springboot的医院管理系统
  5. android9应用icon尺寸,APP-icon尺寸
  6. 物联网在工业企业的应用与实践 (1) 物联网与工业4.0
  7. AB PLC仿真过程
  8. Hprose轻松实现远程过程调用(RPC)
  9. 最好的离子应用程序模板
  10. MVC和MVVM框架模式