转载自【http://www.656463.com/article/336】
HTML5地理位置定位API接口开发包括：地理位置定位原理与介绍和HTML5中地理位置定位的方法，最后获取经纬度显示当前位置在百度地图上
地理位置定位原理与介绍
地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA
地理位置获取流程：
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。
3、假设用户允许，浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。
HTML5地理地位的实现：
1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术
2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备)
3. 持续追踪用户的地理位置
4. 与 Google Map、或者 BaiduMap 交互呈现位置信息。
HTML5中地理位置定位的方法
关于 Geolocation对象
Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许”or “拒绝”。
先看看哪些浏览器支持GeolocationAPI：
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
GeolocationAPI存在于navigator对象中，只包含3个方法：
1、getCurrentPosition //当前位置
2、watchPosition //监视位置
3、clearWatch //清除监视
getCurrentPosition(success,error,option)方法最多可以有三个参数：
第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；
第二个参数用于捕获获取位置信息出错的情况，
第三个参数是配置项。
navigator.geolocation.getCurrentPosition( … , function(error){
switch(error.code){
case error.TIMEOUT :
alert( " 连接超时，请重试 " );
break;
case error.PERMISSION_DENIED :
alert( " 您拒绝了使用位置共享服务，查询已取消 " );
break;
case error.POSITION_UNAVAILABLE :
alert( " ，抱歉，暂时无法为您所在的星球提供位置服务 " );
break;
}
});
navigator.geolocation.getCurrentPosition( … , … , option);
option配置项,第三个参数是一个对象，该对象影响了获取位置时的一些细节。
enableHighAccuracy ，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true。
timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。 这样我们尝试修改调用 getCurrentPosition 时传递的参数
watchPosition像一个追踪器与clearWatch成对。
watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation
.watchPosition(success_callback,
error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );
利用HTML5和百度地图API实现地理定位
完整源码：
<!DOCTYPE html>
<head>
<meta charset=gbk>
<title>HTML5 地理位置定位 API 接口开发</title>
<script type="text/javascript"
src="http://api.map.baidu.com/api?key=&v1=1.1&services=true">
</script>
</head>
<body>
<div style="width:697px;height:550px;border: #ccc solid 1px;"
id="mapContent"></div>
<script type="text/javascript">
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(p){
var latitude = p.coords.latitude;
var longitude = p.coords.longitude;
createMap(latitude,longitude);
},
function(e){
var msg = e.code+"\n"+e.message;
}
);
}else{
alert("不支持");
}
function createMap(a,b){
var map = new BMap.Map("mapContent");
var point = new BMap.Point(b,a);
map.centerAndZoom(point,20);
window.map=map;
}
</script>
</body>
</html>
在电脑上显示的地理位置不是很准确
分享到：
相关推荐
地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA 地理位置获取流程： 1、用户打开需要获取地理位置的web应用。 2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。 3、假设用户允许，...
HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图接口来获取用户准确的地理位置...
HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图接口来获取用户准确的地理位置...
鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐，传统方式根据主流系统分别开发相应的系统耗时又耗力，为了高效开发并节约开发项目成本，本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
Google Map应用：GPS定位、规划导航路径、GPS Google地图、地址反查地理坐标等卫星全球定位实例。 创意程序设计：即时动态桌面、电蚊香、转转轮盘、任务管理器、中英发音字典、手机手电筒、GPS轨迹记录器、女性贴身...
Google Map应用：GPS定位、规划导航路径、GPS Google地图、地址反查地理坐标等卫星全球定位实例。 创意程序设计：即时动态桌面、电蚊香、转转轮盘、任务管理器、中英发音字典、手机手电筒、GPS轨迹记录器、女性贴身...
Google Map应用：GPS定位、规划导航路径、GPS Google地图、地址反查地理坐标等卫星全球定位实例。 创意程序设计：即时动态桌面、电蚊香、转转轮盘、任务管理器、中英发音字典、手机手电筒、GPS轨迹记录器、女性贴身...
Google Map应用：GPS定位、规划导航路径、GPS Google地图、地址反查地理坐标等卫星全球定位实例。 创意程序设计：即时动态桌面、电蚊香、转转轮盘、任务管理器、中英发音字典、手机手电筒、GPS轨迹记录器、女性贴身...
监控老人，获得老人目前所在的地理位置；监控小孩，获得小孩最近的通话、短信信息等。 微信小程序是腾讯公司基于微信平台推出的一种轻量级应用形态，它无需用户下载安装即可在微信内直接使用。自2017年正式上线...
4、高度封装的微信交互API，可轻松处理微信端用户发送的文本、图片、语音、视频、位置、链接等类型消息，亦可对关注、取消关注、扫码、点击菜单、上报地理位置等事件进行灵活处理。 5、封装了微信支付、客服群发、...
命令行工具配置CSS和样式资料验证数据可视化数据库驱动程序日期和时间调试工具DevOps工具分配文献资料下载器电子商务和在线支付电子邮件环境管理学文件上传功能翻转外部功能接口形式游戏开发地理位置定位图形用户...