HTML5地理定位实例讲解

html5 geolocation(地理定位)用于定位用户的位置。

定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

浏览器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位).

注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。

立即学习“前端免费学习笔记(深入)”;

HTML5 – 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例,可返回用户位置的经度和纬度:

实例

var x=document.getElementById("demo");function getLocation()  {  if (navigator.geolocation)    {    navigator.geolocation.getCurrentPosition(showPosition);    }  else{x.innerHTML="该浏览器不支持获取地理位置。";}  }function showPosition(position)  {  x.innerHTML="Latitude: " + position.coords.latitude +   "
Longitude: " + position.coords.longitude; }

登录后复制

实例解析:

检测是否支持地理定位

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

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

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

上面的例子是一个非常基础的地理定位脚本,不含错误处理。

function showError(error)  {  switch(error.code)     {    case error.PERMISSION_DENIED:      x.innerHTML="用户拒绝对获取地理位置的请求。"      break;    case error.POSITION_UNAVAILABLE:      x.innerHTML="位置信息是不可用的。"      break;    case error.TIMEOUT:      x.innerHTML="请求用户地理位置超时。"      break;    case error.UNKNOWN_ERROR:      x.innerHTML="未知错误。"      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="@@##@@";}

登录后复制

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

Google地图脚本
上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

给定位置的信息

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

实例:

更新本地信息

显示用户周围的兴趣点

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

getCurrentPosition() 方法 – 返回数据

T若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。

Geolocation 对象 – 其他有趣的方法

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

clearWatch() – 停止 watchPosition() 方法

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

var x=document.getElementById("demo");function getLocation()  {  if (navigator.geolocation)    {    navigator.geolocation.watchPosition(showPosition);    }  else{x.innerHTML="该浏览器不支持获取地理位置。";}  }function showPosition(position)  {  x.innerHTML="纬度: " + position.coords.latitude +   "
经度: " + position.coords.longitude; }

登录后复制

【相关推荐】

1. 特别推荐:“php程序员工具箱”V0.1版本下载

2. “php程序员工具箱”V0.1版本下载“php程序员工具箱”V0.1版本下载

3. “php程序员工具箱”V0.1版本下载“php程序员工具箱”V0.1版本下载

HTML5地理定位实例讲解

以上就是HTML5地理定位实例讲解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3200379.html

(0)
上一篇 2025年4月1日 07:10:24
下一篇 2025年4月1日 07:11:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 认识一下vue中的模板语法,聊聊容器和实例的关系

    本篇文章带大家了解一下vue中的模板语法,介绍一下插值语法和指令语法,并聊聊容器和实例的关系,希望对大家有所帮助! 我要一步一步往上爬~大家好,今天我们来一起认识一下模板语法这个概念! 一、模板语法 模板语法分为插值语法和指令语法两种。 立…

    2025年4月1日
    200
  • VUE3入门实例教程

    vue.js是一款流行的javascript框架,它具有易于上手、便捷灵活等特点。vue.js 3是全新的版本,它增加了很多新特性和功能。本文将为您介绍如何使用vue.js 3进行入门实例开发,以帮助您快速掌握vue.js 3的基础知识。 …

    编程技术 2025年4月1日
    100
  • VUE3入门实例:制作一个简单的视频播放器

    随着新一代前端框架的不断涌现,vue3作为一个快速、灵活、易上手的前端框架备受热爱。接下来,我们就来一起学习vue3的基础知识,制作一个简单的视频播放器。 一、安装VUE3 首先,我们需要在本地安装VUE3。打开命令行工具,执行以下命令: …

    编程技术 2025年4月1日
    200
  • VUE3初学者必备的开发技巧与实例

    vue3作为目前前端框架中使用率日益增长的框架之一,越来越多的开发者也开始尝试学习和使用它。尤其是在国内,vue3的应用已经覆盖了很多领域,无论是移动端还是pc端都有广泛的应用。因此,本文将为初学者提供一些vue3开发的必备技巧和实例,以帮…

    编程技术 2025年4月1日
    100
  • Vue文档中的created函数实例分析

    vue.js是一个现代的前端框架,它采用了一些常见的编程概念,如组件和数据绑定。在vue.js的文档中,一个很常用的函数是created函数。本文将对vue文档中的created函数做一个实例分析。 created函数 Vue.js中的cr…

    编程技术 2025年4月1日
    200
  • Photoshop图层样式和混合模式区别实例

     相当简单的教程。不过我认为对图层样式 %ignore_a_2%%ignore_a_3%的理解有很大帮助,先来看下效果图:  我们以橙色为例。  只需调整三处。                                        …

    2025年4月1日 编程技术
    200
  • Photoshop CS3 友基绘影2数位板绘图实例

      本photoshop教程是关于绘制中国城池插画,绘制效果是一个中国风城池概念设计稿,主要要注意画面整体布局还有光影处理问题,教程适合有一定绘画基础的网友参考学习。  工具:photoshop cs3软件、友基绘影2数位板  相关文章:p…

    2025年4月1日
    100
  • Photoshop入门:网上下载的滤镜应用实例

    前面讲述了Photoshop入门:动作的安装使用实例,继续讲解网上下载的一些滤镜如何应用呢? 相关教程:Photoshop入门:外挂滤镜的安装和使用。1,首先找到需要安装的滤镜文件(就是自己下载的滤镜文件)然后选取复制。本文使用的是正弦滤镜…

    2025年4月1日 编程技术
    200
  • Photoshop变换复制实例

    这是ps里一个简单而实用的功能,由于要用到几个组合键所以经常忘记怎么用,刚好在网上看到今天给大家发布下,需要的时候可以随时查阅。  

    2025年4月1日
    100
  • Photoshop基础_初学者学习经验谈

    photoshop初级的东西,网上教程一大把,等基础工具学会了,拼的就不是操作了,而是创意。  看了一大把的photoshop实例教程都觉得解决不了其他人“创意”的领悟提升。所以,我的想法就是,如果你觉得你创意思维不够,最好不要玩ps~~~…

    编程技术 2025年4月1日
    100

发表回复

登录后才能评论