html5中获取地理位置信息

HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图等接口来获取用户准确的地理位置信息。

定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可，电脑端操作也是如此。

这些位置信息是从何而来的呢？ip地址，GPS全球定位，wifi无线网络，基站，所以如果通过ip去定位的话，可能这个位置信息就不是那么准确，因为可能获取的位置信息是ip提供商的位置。所以，现在移动端手机一般获取到的位置信息都是基于GPS全球定位系统，也就是卫星定位，这个准确度很高。大家地理应该都学过，我们获取某处的位置一般是根据经度（南北极的连接线）和纬度（东西连接的线）的交叉线来获取的。

接下来我们一起来了解获取地理位置信息的API，这个对象是:

<span style="font-size:18px;">navigator.geolocation</span>

这个对象底下有单次定位请求的方法和多次定位请求的方法。我们先看一下单次定位请求的方法：

<span style="font-size:18px;">getCurrentPosition(请求成功,请求失败,数据手机方式)</span>

这个方法里面有三个参数，其中第一个请求参数是请求成功的回调函数，这个成功的回调函数里面可以获得很多的位置属性，如下：

»经度: coords.longitude

»纬度: coords.latitude

»海拔: coords.altitude

»海拔准确度: coords.altitudeAcuracy

»行进方向: coords.heading

»地面速度: coords.speed

»时间戳: new Date(position.timestamp)

第二个请求参数是请求失败的回调参数，请求失败有很多因素，回调参数里有个code属性就分别表示失败的原因：

»失败编号：code

»0 : 不包括其他错误编号中的错误

»1 : 用户拒绝浏览器获取位置信息

»2 : 尝试获取用户信息，但失败了

»3 : 设置了timeout值，获取位置超时了

第三个参数表示的是数据的一个收集，这是JSON格式的，分别有以下形式：

»enableHighAcuracy : 更精确的查找，默认false

»timeout : 获取位置允许最长时间，默认infinity

»maximumAge : 位置可以缓存的最大时间，默认0

具体的举个例子如下:

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:400px;height:400px;border:1px solid black;}
</style>
<script>
window.onload = function(){var oInput = document.getElementById('in1');var oDiv = document.getElementById('box1');oInput.onclick = function(){window.navigator.geolocation.getCurrentPosition(function(position){var longitude = position.coords.longitude;var latitude =  position.coords.latitude;var altitude = position.coords.altitude;var altitudeAcuracy = position.coords.altitudeAcuracy;var heading = position.coords.heading;var speed = position.coords.speed;var data = new Date(position.timestamp);oDiv.innerHTML = '经度:'+longitude+'/n纬度:'+latitude+'/n海拔'+altitude+"altitudeAcuracy"+altitudeAcuracy+"/n行走方向"+heading+'/n地面速度'+speed+'/n时间戳'+data;},function(err){alert(err.code);},{timeoenableHighAcuracy:false,timeout : 5000,maximumAge :5  });};
};
</script>
</head><body>
<input type='button' value='获取地理位置信息' id='in1' />
<div id='box1'> </div>
</body>
</html>
</span>

接下来我们再看一下多次定位请求的方法:

<span style="font-size:18px;"> watchPosition(像setInterval)
</span>

»移动设备有用，位置改变才会触发

»配置参数：frequency 更新的频率

关闭更新请求 :

<span style="font-size:18px;"> clearWatch(像clearInterval)</span>

我们直接来看一个例子:

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>//LBS : 基于地图信息的应用window.onload = function(){var oInput = document.getElementById('input1');var oT = document.getElementById('t1');var timer = null;oInput.onclick = function(){timer = navigator.geolocation.watchPosition(function(position){oT.value += '经度:' + position.coords.longitude+'\n';oT.value += '纬度 :' + position.coords.latitude+'\n';oT.value += '准确度 :' + position.coords.accuracy+'\n';oT.value += '海拔 :' + position.coords.altitude+'\n';oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';oT.value += '行进方向 :' + position.coords.heading+'\n';oT.value += '地面速度 :' + position.coords.speed+'\n';oT.value += '时间戳:' + new Date(position.timestamp)+'\n';},function(err){//err.code // 失败所对应的编号alert( err.code );navigator.geolocation.clearWatch(timer);},{enableHighAcuracy : true,timeout : 5000,maximumAge : 5000,frequency : 1000});};};</script>
</head><body>
<input type="button" value="请求" id="input1" /><br />
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
</body>
</html>
</span>

最后，我们来看一下连接百度地图接口，做一个百度地图应用:

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:400px; height:400px; border:1px #000 solid;}
</style>
<script src="http://api.map.baidu.com/api?v=1.3"></script>
<script>window.onload = function(){var oInput = document.getElementById('input1');oInput.onclick = function(){navigator.geolocation.getCurrentPosition(function(position){var y = position.coords.longitude;var x = position.coords.latitude;var map = new BMap.Map("div1");var pt = new BMap.Point(y, x);map.centerAndZoom(pt, 14);map.enableScrollWheelZoom();var myIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30));var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注map.addOverlay(marker2); var opts = {width : 200,     // 信息窗口宽度height: 60,     // 信息窗口高度title : "北京航空航天大学"  // 信息窗口标题}var infoWindow = new BMap.InfoWindow("软件学院", opts);  // 创建信息窗口对象map.openInfoWindow(infoWindow,pt); //开启信息窗口});};};</script>
</head><body>
<input type="button" value="请求" id="input1" />
<div id="div1"></div>
</body>
</html>
</span>

html5中获取地理位置信息相关推荐

html5实现获取地理位置信息并定位
html5实现获取地理位置信息并定位一.总结一句话总结:获取地理位置是分两步:获取经纬度和根据经纬度获取地址信息 a.HTML5的Geolocation(地理位置功能(Geolocation AP ...
html5获取地理位置信息API
html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...
Flutter 中获取地理位置[Flutter专题61]
大家好,我是坚果,公众号"坚果前端" Flutter 中获取地理位置如今,发现用户位置是移动应用程序非常常见且功能强大的用例.如果您曾经尝试过在 Android 中实现位置,您就 ...
flutter利用高德如何获取地理位置信息bug处理
flutter中对于利用高德如何获取地理位置信息, 1.在高德开发平台,注册成为开发者,并获取key 2.安装依赖对于如何安装第三方插件请点击此处pub.dev amap_location 3.修 ...
百度api:根据经纬度获取地理位置信息
调用百度api,根据经度和纬度获取地理位置信息,返回Json. C#代码: using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Syste ...
Android 获取地理位置信息封装好了直接用
前言:花了一个早上研究了以下android获取经纬度,然后网上的参考资料都是杂七杂八,基本上都是过去几年的,现在我用 android6.0参照别人的结果发生好多错误,我的内心几乎是崩溃的.后来,不断百 ...
uniapp APPH5端获取地理位置信息（百度地图高德地图）
APP&H5端获取地理位置信息一.app端 1.在需要使用的页面中 onShow(){//#ifdef APP-PLUS// 获取定位信息this.getLocations();//#end ...
根据IP获取地理位置信息 — Golang
根据IP获取地理位置信息 - Golang 1 介绍 1.1 ip2region 1.2 geoip2-golang 1.3 总结 2 使用 2.1 ip2region 2.2 geoip2-gola ...
根据地理位置多语言切换（1）- 获取地理位置信息
在手机应用的实现中经常会遇到需要语言切换用于满足用户环境的多样性.可以根据所处地理位置信息进行经纬度及国家/城市/地区的获取,可以根据此内容进行多语言情况的推荐及切换. 完成上述的想法需要进行几个功能 ...

html5中获取地理位置信息

html5中获取地理位置信息相关推荐

最新文章

热门文章