首页 / HTML / 基于浏览器的HTML5地理定位

基于浏览器的HTML5地理定位

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于浏览器的HTML5地理定位，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3997字，纯文字阅读大概需要6分钟。

内容图文

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

技术分享

一、检测浏览器是否支持：

 if (navigator.geolocation) {

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

 }

else {

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

 }

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

 

void getCurrentPosition(onSuccess,onError,options);

//获取用户当前位置

 

int watchCurrentPosition(onSuccess,onError,options);

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

 

void clearWatch(watchId);

//watchId 为watchCurrentPosition返回的值

//取消监控

 

参数详细说明见下表：

参数

功能

返回参数

是否必选

onSuccess

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

Coords

 

返回当前位置的坐标

 

Coordinates

必须

Timestamp

 

返回获取坐标信息的时间

 

字符串

onError

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

Code

 

返回代表错误类型的代码

 

有如下数值 ：

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

2不能确定位置

3请求位置的尝试已超时

可选

message

 

返回描述错误的字符串

 

字符串

options

额外参数

enableHighAccuracy

 

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

 

布尔值

可选

timeout

 

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

 

数值

maximumAge

 

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

 

数值

 

三、代码实现

1、实现原理：html5地理定位 + 腾讯地图

2、实现思路：

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

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

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

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

3、代码实现：

  ①调用腾讯地图JavaScript API，URL路径为：http://map.qq.com/api/js?v=2.exp

  ②核心代码： 

            
                 1
                <!
                DOCTYPE html
                >
                 2
                <
                html
                >
                 3
                <
                head
                >
                 4
                <
                meta 
                charset
                ="utf-8"
                >
                 5
                <
                meta 
                http-equiv
                ="X-UA-Compatible"
                 content
                ="IE=edge,chrome=1"
                />
                 6
                <
                meta 
                name
                ="viewport"
                 content
                ="width=device-width, initial-scale=1.0, user-scalable=no"
                />
                 7
                <
                meta 
                name
                ="format-detection"
                content
                ="telephone=no"
                >
                 8
                <
                title
                >基于浏览器的HTML5地理定位</title> 9<link rel="stylesheet" href="style/style.css">10</head>11<body>12<div id="container"></div>13<div id="info"></div>14<script src="http://map.qq.com/api/js?v=2.exp" type="text/javascript"></script>15<script>16var clientWidth = document.documentElement.clientWidth,
17              clientHeight = document.documentElement.clientHeight;
18var container = document.getElementById(‘container‘);
19          container.style.width = clientWidth +‘px‘;
20          container.style.height = clientHeight +‘px‘;
2122function getLocation(){
2324var options={
25                 enableHighAccuracy:true, //boolean 是否要求高精度的地理信息，默认为false26                 maximumAge:1000//应用程序的缓存时间27             }
2829if(navigator.geolocation){
30//浏览器支持geolocation31                 navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
3233             }else{
34//浏览器不支持geolocation35                 console.log("浏览器不支持!");
36             }
37          }
3839//成功时40function onSuccess(position){
41//返回用户位置42//经度43var longitude =position.coords.longitude;
44//纬度45var latitude = position.coords.latitude;
4647//腾讯地图的中心地理坐标48var center =new qq.maps.LatLng(latitude, longitude);
4950//使用腾讯地图API51var map =new qq.maps.Map(document.getElementById("container"), {
52//地图的中心地理坐标53                center: center,
54//初始化地图缩放级别55                zoom: 1656              });
5758//在地图中创建信息提示窗口59var infoWin =new qq.maps.InfoWindow({
60                  map: map
61              });
62//打开信息窗口63             infoWin.open();
64//设置信息窗口显示区的内容65              infoWin.setContent(‘<div style="width:200px;padding:10px;">‘+66‘您在这里<br/>纬度：‘+  latitude+‘<br/>经度：‘+longitude);
67//设置信息窗口的位置68              infoWin.setPosition(center);
69          }
707172//失败时73function onError(error){
74switch(error.code){
75case error.PERMISSION_DENIED:
76                 alert("用户拒绝对获取地理位置的请求");
77break;
7879case error.POSITION_UNAVAILABLE:
80                 alert("位置信息是不可用的");
81break;
8283case error.TIMEOUT:
84                 alert("请求用户地理位置超时");
85break;
8687case error.UNKNOWN_ERROR:
88                  alert("未知错误");
89break;
90             }
9192          }
9394          window.onload=getLocation;
95</script>96</body>97</html>

DEMO演示

技术分享

 

 

四、注意事项：

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

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

 

   还有一点需要注意：

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

 

原文：http://www.cnblogs.com/daipianpian/p/5811204.html

内容总结

以上是互联网集市为您收集整理的基于浏览器的HTML5地理定位全部内容，希望文章能够帮你解决基于浏览器的HTML5地理定位所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1282908.html

来源：【匿名】