html5中地理位置定位api接口开发应用小结

地理位置定位的几种方式：ip地址，gps，wifi，gsm/cdma

地理位置获取流程：

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

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

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

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

html5地理地位的实现：

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

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

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

4. 与 google map、或者 baidu map 交互呈现位置信息

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

先看看哪些浏览器支持geolocation api：

ie9.0+、ff3.5+、safari5.0+、chrome5.0+、opera10.6+、iphone3.0+、android2.0+

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

复制代码 代码如下:

1、getcurrentposition //当前位置

2、watchposition //监视位置

3、clearwatch //清除监视

navigator.geolocation.getcurrentposit缩句的方法与技巧ion( … , function(error){

switch(error.code){

ca error.timeout :

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

break;

ca error.permission_denied :

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

break;

ca error.position_unavai临溪而渔lable :

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

break;

}

});

watchposition像一个追踪器与clearwatch成对。

watchposition与clearwatch有点像tinterval和clearinterval的工作方式。

var watchpositionid = navigator.geolocation.watchposition(success_callback, error_callback, options);

navigator.geolocation.clearwatch(watchpositionid );

html 5提供了地理位置等一系列api可以给用户使用，方便用户制作lbs的地理应用，首先在支持html 5的浏览器中，当开启api时，会询问是否用户同意使用api，否则不会开启的，保证安全。


1、开启，判断是否浏览器支持lbs api

复制代码 代码如下:

function isgeolocationapiavailable()
重本线
{

var location = “no, geolocation is not supported by this browr.”;

if (window.navigator.geolocation) {

location = “yes, geolocation is supported by this browr.”;

}

alert(location);

}

上面的例子中，还在displayerror方法中，捕捉了异常；


2、获得用户的地理位置

这个使用getcurrentposition就可以了；

复制代码 代码如下:

function requestposi安徽导游词tion() {

if (nav == null) {

nav = window.navigator;

}

if (nav != null) {

var geoloc = nav.geolocation;

if (geoloc != null) {

geoloc.getcurrentposition(successcallback);

}

el {

alert(“geolocation api is not supported in your browr”);

}

}

el {

alert(“navigator is not found”);

}

}

当获得地理位置成功后，会产生一个回调方法了，处理返回的结果，

复制代码 代码如下:

function tlocation(val, e) {

document.getelementbyid(e).value = val;

}

function successcallback(position)

{

tlocation(position.coords.latitude, “latitude”); tlocation(position.coords.longitude, “longitude”);

}

3、一个很常见的问题，是如何跟踪用户不断变化的地理位置，这里小结下其中用到的两个api

1 watchposition

例子如下：

复制代码 代码如下:

function listenforpositionupdates() {

if (nav == null) {

nav = window.navigator;

}

if (nav != null) {

var geoloc = nav.geolocation;

if (geoloc != null) {

watchid = geoloc.watchposition(successcallback);

} el {

alert(“geolocation api is not supported in your browr”);

}

} el {

alert(“navigator is not found”);

}

}

然后在successcallback中，就可以设置显示最新的地理位置：

复制代码 代码如下:

function successcallback(position){

ttext(position.coords.latitude, “latitude”); ttext(position.coords.longitude, “longitude”);

}

如果不希望实时跟踪，则可以取消之：

function clearwatch(watchid) {

window.navigator.geolocation.clearwatch(watchid);

}


4、如何处理异常

当遇到异常时，可以捕捉之：

复制代码 代码如下:

if (geoloc != null) {

geoloc.getcurrentposition(successcallback, errorcallback);

}

function errorcallback(error) {

var message = “”;

switch (error.code世界各国面积排名) {

ca error.permission_denied:

message = “this website does not have permission to u ”

+ “the geolocation api”;

break;

ca error.position_unavailable:

message = “the current position could not be determined.”;

break;

ca error.permission_denied_timeout:

message = “the current position could not be determined ”

+ “within the specified timeout period.”;

break;

}

if (message == “”) {

var strerrorcode = error.code.tostring();

message = “the position could not be determined due to ”

+ “an unknown error (code: ” + strerrorcode + “).”;

}

alert(message);

}

5、 在google 地图上显示位置（前提是有google map api等设置好）

复制代码 代码如下:

function getcurrentlocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getcurrentposition(showmyposition,showerror);

}

el

{

alert(“no, geolocation api is not supported by this browr.”);

}

}

function showmyposition(position)

{

var coordinates=position.coords.latitude+”,”+position.coords.longitude;

var map_url=”http://maps.googleapis.com/maps/api/staticmap?center=”

+coordinates+”&zoom=14&size=300×300&nsor=fal”;

document.getelementbyid(“googlemap”).innerhtml=”<img src='”+map_url+”‘ />”;

}

function showerror(error)

{

switch(error.code)

{

ca error.permission_denied:

alert(“this website does not have permission to u the geolocation api”)

break;

ca error.position_unavailable:

alert(“the current position could not be determined.”)

break;

ca error.timeout:

alert(“the current position could not be determined within the specified time out period.”)

break;

ca error.unknown_error:

alert(“the position could not be determined due to an unknown error.”)

break;

}

}