地理位置定位原理与介绍

最新推荐文章于 2021-06-08 10:36:47 发布

转载最新推荐文章于 2021-06-08 10:36:47 发布 · 2k 阅读

文章标签：

#浏览器 #function #callback #api #html5 #opera

html5 专栏收录该内容

122 篇文章

订阅专栏

地理位置定位的几种方式：IP地址，GPS，Wifi，GSM/CDMA

地理位置获取流程：

1、用户打开需要获取地理位置的web应用。

2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。

3、假设用户允许，浏览器从设别查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

HTML5地理地位的实现：

1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术

2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备 )

3. 持续追踪用户的地理位置

4. 与 Google Map、或者 Baidu Map 交互呈现位置信息。

HTML5中地理位置定位的方法

关于 Geolocation 对象

Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许” or “拒绝”。

先看看哪些浏览器支持Geolocation API： IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+

if (navigtor.geolocation){

alert( '你的浏览器支持 geolocation' );

} else {

alert( '你的浏览器不支持 geolocation' );

}

Geolocation API存在于navigator对象中，只包含3个方法：

1、getCurrentPosition //获取当前位置,只获取一次

2、watchPosition //监视位置改变,只要位置改变就获取,可实现地图导航

3、clearWatch //清除位置监视,与watchPosition配对使用

getCurrentPosition(success,error,option)方法最多可以有三个参数：

第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；

coords.latitude ，纬度

coords.longitude ，经度

accuracy 准确角

altitude 海拔高度

altitudeAcuracy 海拔高度的精确度

heading 行进方向

speed 地面的速度

以下三个值只有Opera浏览器能获取到

p.address.country (国家)

p.address. region (省份)

p.address.city (城市)

第二个参数用于捕获获取位置信息出错的情况；

TIMEOUT ，连接超时。

PERMISSION_DENIED ，您拒绝了使用位置共享服务，查询已取消。

POSITION_UNAVAILABLE ，暂时无法为您所在的星球提供位置服务。

第三个参数是配置项,它是一个对象，该对象影响了获取位置时的一些细节。

enableHighAccuracy ，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true。

timeout，超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。这样我们尝试修改调用 getCurrentPosition 时传递的参数

navigator.geolocation.getCurrentPosition(

function (p) {

var map= "维度" +p.coords.latitude+ "经度" +p.coords.longitude;

alert( var );

},

function (error){

switch (error.code){

case error.TIMEOUT :

alert( " 连接超时，请重试 " );

break ;

case error.PERMISSION_DENIED :

alert( " 您拒绝了使用位置共享服务，查询已取消 " );

break ;

case error.POSITION_UNAVAILABLE :

alert( " ，抱歉，暂时无法为您所在的星球提供位置服务 " );

break ;

}

},

option

);

watchPosition方法只针对移动设备

watchPosition像一个追踪器与clearWatch成对。

watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。

1 2	`var` `watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);` `navigator.geolocation.clearWatch(watchPositionId );`

HTML5地理定位(百度地图)

百度地图API开发指南

<!DOCTYPE html>

< html >

< head >

< meta charset = "uft-8" >

< meta name = "viewport" content = "initial-scale=1.0, user-scalable=no" /> 

< title >HTML5开发地理位置定位(百度地图与谷歌地图)</ title >

< script src = "http://api.map.baidu.com/api?v=1.3" type = "text/javascript" ></ script >

</ head >

< body >

< h1 >爱玩 < a title = "爱玩C" href = "http://www.iwanc.com" target = "_blank" >http://www.iwanc.com</ a ></ h1 >

< p id = "geo_loc" ></ p >

< div style = "width:700px;height:550px;border:#ccc solid 1px;" id = "dituContent" ></ div >

< script >

if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(

function(p){

document.getElementById('geo_loc').innerHTML="纬度"+p.coords.latitude+"经度"+p.coords.longitude;

createMap(p.coords.latitude,p.coords.longitude);

},

function(err){

document.getElementById('geo_loc').innerHTML=err.code+"\n"+err.message;

}

);

}else{

document.getElementById('geo_loc').innerHTML="您的浏览器不支持地图定位";

}

function createMap(a,b){

var map=new BMap.Map("dituContent"); //创建地图实例

var point=new BMap.Point(b,a); //经度,纬度,定义一个中心点坐标

map.centerAndZoom(point,15);            //初始化地图，设置中心点坐标和地图级别(值越大,地图越详细)

map.enableScrollWheelZoom(); //启用地图滚轮放大缩小

window.map=map; //将map变量存储在全局

}

</ script >

</ body >

</ html >

HTML5开发地理位置定位(百度地图) Demo HTML5-Geolocation-baidu

HTML5地理定位(谷歌地图)

谷歌地图中文API文档

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

<!DOCTYPE html>

< html >

< head >

< meta charset = "uft-8" >

< title >HTML5开发地理位置定位(谷歌地图)</ title >

< script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false&language=zh-CN" ></ script >

< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></ script >

< style type = "text/css" >

#info{

width:400px;

height:60px;

border:1px solid;

}

#map{

width:800px;

height:600px;

border:1px solid;

margin-top:10px;

}

</ style >

</ head >

< body >

< h1 >爱玩 < a title = "爱玩C" href = "http://www.iwanc.com" target = "_blank" >http://www.iwanc.com</ a ></ h1 >

< input type = "button" id = "btn" value = "获取位置" >

< div id = "info" title = "用户地理位置信息" ></ div >

< div id = "map" title = "google 地图" ></ div >

< script type = "text/javascript" >

$(document).ready(

function() {

var btn = document.getElementById('btn');

var info = document.getElementById('info');

var map = document.getElementById('map');

var geolocation;

var gmap;

var gmarker;

$("#btn").click(

function() {

if (window.navigator.geolocation) {

info.innerHTML = "请等待查询结果……";

geolocation = window.navigator.geolocation;

geolocation.getCurrentPosition(

getPositionSuccess, getPositionError, {

timeout : 5000

});

} else {

info.innerHTML = "您的浏览器不支持地理位置定位";

}

});

function getPositionError(error) {

switch (error.code) {

case error.TIMEOUT:

info.innerHTML = "连接超时";

break;

case error.PERMISSION_DENIED:

info.innerHTML = "无权使用地理位置共享服务";

break;

case error.POSITION_UNAVAILABLE:

info.innerHTML = "无法提供位置服务";

break;

}

function getPositionSuccess(position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

geolocation.watchPosition(refreshPosition);

var latLng = new google.maps.LatLng(lat, lon);

var mapOptions = {

zoom : 16,

center : latLng,

mapTypeId : google.maps.MapTypeId.ROADMAP

};

gmap = new google.maps.Map(map, mapOptions);

gmarker = new google.maps.Marker({

position : latLng,

map : gmap

});

}

/*持续追踪地理位置*/

function refreshPosition(position) {

var lat = position.coords.latitude;

var lon = position.coords.longitude;

//将经纬度转换为地名

getPlaceFromFlickr(lat, lon, 'output');

var latLng = new google.maps.LatLng(lat, lon);

//重设地图位置

gmap.setSenter(latLng);

//重设标记位置

gmarker.setOptions({

position : latLng

});

}

//将经纬度转化为地名

function getPlaceFromFlickr(lat, lon, callback) {

info.innerHTML = "您所在的位置经度：" + lat + ", 纬度：" + lon;

var yql = 'select * from flickr.places where lat=' + lat

+ ' and lon=' + lon;

//将YQL网络服务器的api嵌入到网页，这是javascript库

var url = 'http://query.yahooapis.com/v1/public/yql?q='

+ encodeURIComponent(yql)

+ '&format=json&diagnostics=' + 'false&callback='

+ output;

var script = document.createElement('script');

script.setAttribute('src', url);

document.getElementsByTagName('head')[0]

.appendChild(script);

}

function output(o) {

if (typeof (o.query.results.places.place) != 'undefined') {

info.innerHTML += "< br />"

+ o.query.results.places.place.name;

}

});

</ script >

</ body >

</ html >

HTML5开发地理位置定位(谷歌地图) Demo HTML5-Geolocation-google