html定位的实例,H5案例分享：基于浏览器的HTML5地理定位

基于浏览器的HTML5地理定位

地理位置(Geolocation)是 HTML5 的重要特性之一&＃xff0c;提供了确定用户位置的功能&＃xff0c;借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo&＃xff0c;过程就是获取浏览器经纬度&＃xff0c;并用腾讯地图(大家可以选择自己喜欢的地图)显示出来&＃xff0c;实现的最终效果如下图所示&＃xff1a;

一、检测浏览器是否支持&＃xff1a;

if (navigator.geolocation) {

//console.log("浏览器支持!");

}

else {

// console.log("浏览器不支持!");

}

二、navigator.geolocation用于获取基于浏览器的当前用户地理位置&＃xff0c;提供了3个方法:

void getCurrentPosition(onSuccess,onError,options);

//获取用户当前位置

int watchCurrentPosition(onSuccess,onError,options);

//持续获取当前用户位置

void clearWatch(watchId);

//watchId 为watchCurrentPosition返回的值

//取消监控

参数详细说明见下表&＃xff1a;

参数

功能

返回参数

是否必选

onSuccess

方法成功时候的回调&＃xff0c;返回position对象&＃xff0c;通过这个对象可以获取地理位置的相关信息

1、 Coords

返回当前位置的坐标

Coordinates

2、 Timestamp

返回获取坐标信息的时间

字符串

必须

onError

方法失败时候的回调&＃xff0c;返回error对象&＃xff0c;通过这个对象返回错误类型

1、Code

返回代表错误类型的代码

有如下数值 &＃xff1a;

①用户未授权使用地理定位功能

②不能确定位置

③请求位置的尝试已超时

2、message

返回描述错误的字符串

字符串

可选

options

额外参数

1、enableHighAccuracy

告诉浏览器我们希望得到可能的高精度的地理信息

布尔值

2、timeout

限制请求位置的时间,设置多少毫秒后会报告一个超时错误

数值

3、maximumAge

告诉浏览器我们愿意接受缓存过的位置,只要它不早于指定的毫秒数

数值

可选

三、代码实现

1、实现原理&＃xff1a;html5地理定位 &＃43; 腾讯地图

2、实现思路&＃xff1a;

① 判断浏览器是否支持geolocation地理定位

② 用HTML5 Geolocation API (地理位置应用程序接口)获取经纬度

③ 调用腾讯地图接口&＃xff0c;将获取到的经纬度以参数形式参入腾讯地图地理坐标中&＃xff0c;并显示到页面上

PS&＃xff1a;也可以调用百度地图、谷歌地图、高德地图等&＃xff0c;只需要将HTML5 Geolocation API获取到的值传入到相应的地图接口中

3、代码实现&＃xff1a;

② js核心代码&＃xff1a;

function getLocation(){

var options&＃61;{

enableHighAccuracy:true, //boolean 是否要求高精度的地理信息&＃xff0c;默认为false

maximumAge:1000 //应用程序的缓存时间

}

if(navigator.geolocation){

//浏览器支持geolocation

navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

}else{

//浏览器不支持geolocation

console.log("浏览器不支持!");

}

}

//成功时

function onSuccess(position){

//返回用户位置

//经度

var longitude &＃61;position.coords.longitude;

//纬度

var latitude &＃61; position.coords.latitude;

//使用腾讯地图API

//腾讯地图的中心地理坐标

var center &＃61; new qq.maps.LatLng(latitude, longitude);

var map &＃61; new qq.maps.Map(document.getElementById("container"), {

//地图的中心地理坐标

center: center,

//初始化地图缩放级别

zoom: 16

});

//在地图中创建信息提示窗口

var infoWin &＃61; new qq.maps.InfoWindow({

map: map

});

//打开信息窗口

infoWin.open();

//设置信息窗口显示区的内容

infoWin.setContent(&＃39;

&＃39;&＃43;

&＃39;您在这里

纬度&＃xff1a;&＃39;&＃43; latitude&＃43; &＃39;

经度&＃xff1a;&＃39;&＃43;longitude);

//设置信息窗口的位置

infoWin.setPosition(center);

}

//失败时

function onError(error){

switch(error.code){

case error.PERMISSION_DENIED:

alert("用户拒绝对获取地理位置的请求");

break;

case error.POSITION_UNAVAILABLE:

alert("位置信息是不可用的");

break;

case error.TIMEOUT:

alert("请求用户地理位置超时");

break;

case error.UNKNOWN_ERROR:

alert("未知错误");

break;

}

}

window.οnlοad&＃61;getLocation;

DEMO演示

四、注意事项&＃xff1a;

此代码在PC端运行&＃xff0c;会得不到数据&＃xff0c;因为获取位置信息&＃xff0c;以及监控位置的变化这些操作都属于敏感性操作&＃xff0c;所以browsers在执行都会非常谨慎。它需要你在安全的环境并且获取用户的同意才会执行。

在移动端&＃xff0c;会提示是否允许地理位置授权&＃xff0c;用户同意后&＃xff0c;才会继续获取数据&＃xff0c;进行下面的操作。

还有一点需要注意&＃xff1a;

用HTML5 Geolocation API (地理位置应用程序接口)获得的经纬度参数&＃xff0c;传入到腾讯地图&＃xff0c;并显示出来后&＃xff0c;会发现会有一定的偏移&＃xff0c;这是因为我国把美国卫星的GPS的地球坐标&＃xff0c;进行偏移的算法&＃xff0c;计算后&＃xff0c;得出了一个火星坐标。为了让火星坐标能正确的显示&＃xff0c;又给每部导航软件加入了这个算法&＃xff0c;可以在大家的地图上还原位置&＃xff1b;而自己写的程序里没有加入此算法&＃xff0c;所以出现了偏移问题&＃xff0c;而这个加偏并不是线性的加偏&＃xff0c;所以各地的偏移情况都会有所不同。