使用html5的Geolocation API实现定位

公司有个需求,需要获取用户的位置,所以看了下html5的Geolocation 这个新东西,发现挺好用的。

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮,获得您的坐标:</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>
</body>
</html>

  上面代码运行后,先会弹出,是否允许获取您的当前地理位置,如果你点击确定,那么就会得到你当前位置的坐标,那么我们就可以把这个坐标显示到地图上了。

最好是用高德地图的,因为高德地图的坐标和谷歌地图的坐标是一致的,不需要进行坐标转换,百度地图就不行,需要转换坐标,又是一大堆代码。

时间: 2024-10-22 11:40:16

使用html5的Geolocation API实现定位的相关文章

关于HTML5 地理位置geolocation API 的一些事

大学毕业,到进入这个行业也已经有5个多月了,接触HTML5 Webapp开发也有5个多月了,趁着周末写一些关于在开发过程中使用HTML5 Geolocation API的一些心得. 一.浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位). 移动端:Android 2.0+,iPhone 3.0+,Opera Mobile 10.1+,Symbian,Blackberry OS 6,Maem

HTML5 调用百度地图API地理定位

<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="ht

HTML5 Geolocation API精确性[转载]

大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小伙伴在哪儿)中,发现用PC获取的地理位置与手机端获取的地理信息存在微小的差距,PC端会经常出现获取不到地理位置的情况,PC端和手机端的Geolocation是否有什么底层实现方面的差别呢,HTML5又是根据什么原则来确定应该采用何种方式来确定经度和纬度信息呢? 带着这个问题,作者查阅了一些资料,得出

HTML5学习笔记 Geolocation(地理定位)

HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置 html5 Geolocation API用于获得用户的地理位置 鉴于该特性可能低侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML5 -使用地理定位 请使用getCurrentPositon()方法来获得用户的位置 下例是一个简单的地理定位的实例,可返回用户位置的纬度和纬度 直接上代码吧: <script> var x=document.getElementById("demo&q

html5 geolocation API

清单 1. 检查浏览器支持性if (navigator.geolocation) 清单 2. 单次定位请求 API void getCurrentPosition(updateLocation, optional handleLocationError, optional options); 清单 3. updateLocation() 函数使用示例updateLocation() 函数是getCurrentPosition的必选参数,也是浏览器指明位置数据可用时应调用的函数.获取位置操作可能需

HTML5 Geolocation(地理定位)用于定位用户的位置。

定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9.Firefox.Chrome.Safari 以及 Opera 支持地理定位. 注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确. HTML5 - 使用地理定位 请使用 getCurrentPosition() 方法来获得用户的位置. 下例是一个简单的地理定位实例,可返

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是cookie有下面几个问题: a:大小:cookies的大小被限制在4KB b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽. c:复杂性:要正确的操纵cookies是很困难的. Web Storage分为两种: <1>sessionStorage 将数

地理位置(Geolocation)API 简介

一.开篇简述 Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法.且目前看来浏览器的支持情况还算不错(因为新版本的IE支持了该API),这使得在不久之后就可以使用这一浏览器内置的API了.该API接口提供的用户地理位置信息还算蛮详细的,经纬度啊,海拔啊,精确度,移动速度啊都是可以获取的. 据我个人的了解,其位置的获取是通过收集用户周围的无线热点和您 PC 的 IP 地址.然后浏览器把这些信息发送给默认的位置定位服务提供者,也就是谷歌位置服务,由它

Geolocation API JavaScript访问用户的当前位置信息

Geolocation API在浏览器中的实现是navigator.geolocation对象,常用的有以下方法. 1.第一个方法是getCurrentPosition() 调用这个方法就会触发请求用户共享地理定位信息的对话框.比如在火狐中的对话框: 这个方法接收3个参数:成功回调函数.可选的失败回调函数和可选的选项对象. ①成功回调函数会接收一个Position对象参数,有两个属性:coords和timestamp. coords对象中包含下列与位置相关的信息. latitude,十进制纬度