如何使用html5地理位置定位功能

关键词：

HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图接口来获取用户准确的地理位置信息。
定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可。

?

1
2
3
4
5
6
7

function getLocation()
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(showPosition,showError);
else
alert("浏览器不支持地理定位。");



上面的代码可以知道，如果用户设备支持地理定位，则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。
我们先来看函数showError()，它规定获取用户地理位置失败时的一些错误代码处理方式：

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function showError(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;



我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。
?

1
2
3
4
5

function showPosition(position)
var lat = position.coords.latitude; //纬度
var lag = position.coords.longitude; //经度
alert(\'纬度:\'+lat+\',经度:\'+lag);


利用百度地图和谷歌地图接口获取用户地址
上面我们了解了HTML5的Geolocation可以获取用户的经纬度，那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口，我们只需要将HTML5获取到的经纬度信息传给地图接口，则会返回用户所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。
我们首先在页面定义要展示地理位置的div，分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互，我们将经纬度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库，需要先加载jQuery库文件。

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function showPosition(position)
var latlon = position.coords.latitude+\',\'+position.coords.longitude;

//baidu
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0";
$.ajax(
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function()
$("#baidu_geo").html(\'正在定位...\');
,
success: function (json)
if(json.status==0)
$("#baidu_geo").html(json.result.formatted_address);

,
error: function (XMLHttpRequest, textStatus, errorThrown)
$("#baidu_geo").html(latlon+"地址位置获取失败");

);
);

再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口，接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据，这些JSON数据比百度地图接口返回的要更详细，我们可以根据需求将需要的信息展示给div#google_geo。
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function showPosition(position)
var latlon = position.coords.latitude+\',\'+position.coords.longitude;

//google
var url = \'http://maps.google.cn/maps/api/geocode/json?latlng=\'+latlon+\'&language=CN\';
$.ajax(
type: "GET",
url: url,
beforeSend: function()
$("#google_geo").html(\'正在定位...\');
,
success: function (json)
if(json.status==\'OK\')
var results = json.results;
$.each(results,function(index,array)
if(index==0)
$("#google_geo").html(array[\'formatted_address\']);

);

,
error: function (XMLHttpRequest, textStatus, errorThrown)
$("#google_geo").html(latlon+"地址位置获取失败");

);


以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中，我们可以根据实际情况进行调用。当然这只是一个简单的应用，我们可以根据这个简单的示例开发出很多复杂的应用，建议用手机浏览器访问DEMO演示。 参考技术A 定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行， 参考技术B

 html5地理位置定位 - https://21xrx.com/full_stack/Html/html5_geolocation.html

如何使用 Gmap 在浏览器地理定位中处理用户批准？

】如何使用Gmap在浏览器地理定位中处理用户批准？【英文标题】：HowtohandleuserapprovalinbrowsergeolocationwithGmap?【发布时间】：2013-07-1118:06:45【问题描述】：我正在与Gmaps一起构建HTML5地理定位功能。我在等待用户批准进行地理定位时... 查看详情

如何在java web应用程序的后台使用html5地理定位

】如何在javaweb应用程序的后台使用html5地理定位【英文标题】：Howtousehtml5geolocationinthebackgroundforjavawebapplication【发布时间】：2015-09-1416:57:48【问题描述】：我已经在谷歌上搜索了这个问题的答案，但我没有运气，所以我会问它，... 查看详情

Safari 中的 html5 地理定位错误

...nbuginSafari【发布时间】：2014-02-0921:06:44【问题描述】：我使用html5地理定位和本地存储制作网站，我使用的是JS，在大多数浏览器中一切正常，但我在使用Safary时遇到了一些问题：解释如下：单击按钮时，我想为用户获取GEO位置... 查看详情

html5的地理位置定位

html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找，地图应用，导航等功能。地理位置定位基本原理GPS,WIFI,IP,手机信号基站核心对象Geolocation是window.navigator下面的一个对象，该对象提供了实现地理位置... 查看详情

html5获取地理位置和定位(代码片段)

1.H5地理位置定位功能首先判断用户浏览器是否支持该功能，目前大多数现代浏览器均支持，获取位置信息需用户授权同意 functiongetLocation()if(navigator.geolocation)navigator.geolocation.getCurrentPosition(showPosition,showError);elsealert("浏览器不... 查看详情

使用html5地理位置定位到城市的方法及注意事项

介绍本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位，同时记录了遇到的问题和解决方案。实现效果为显示出用户所在的省市，即：XXX省XXX市。实现思路利用HTML5提供的API获取到用户的经纬度信... 查看详情

使用html5地理位置定位到城市的方法及注意事项

介绍本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位，同时记录了遇到的问题和解决方案。实现效果为显示出用户所在的省市，即：XXX省XXX市。实现思路利用HTML5提供的API获取到用户的经纬度信... 查看详情

如何使用谷歌地理定位 API？

】如何使用谷歌地理定位API？【英文标题】：HowtoworkwithGooglegeolocationAPI?【发布时间】：2017-04-1309:19:07【问题描述】：我正在开展一个网络开发项目，我需要在该项目中获取用户的确切位置信息（例如地区、城市、州和国家/地区... 查看详情

高精度地理定位Html5

...用程序共享位置）。我读过enableHighAccuracy:true是可能的。如何在这段代码中设置enableHighAccuracy:true？我尝试了不同的位置，但它不起作用。<scripttype="text/javascr 查看详情

让html5来为你定位（转）

...联网，定位精度都是蛮高的，误差在几十米内。要想获取地理位置，分成两步，先获取经纬度，这是html5的新功能，具体实现各个 查看详情

17html5地理定位

HTML5GeolocationAPI用于获得用户的地理位置鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的注意:大部分浏览器都支持 Geolocation（地理定位），对于拥有GPS的设备，比如iPhone，地理定位更加精确 ... 查看详情

使用 html5 进行地理定位

】使用html5进行地理定位【英文标题】：geolocationusinghtml5【发布时间】：2011-08-0216:20:11【问题描述】：您好，我正在使用html5地理定位来获取用户当前位置。它在除safari之外的所有桌面浏览器上都能正常工作。它也适用于iphone和ip... 查看详情

使用 PHP 检测 HTML5 地理位置支持

】使用PHP检测HTML5地理位置支持【英文标题】：DetectHTML5GeolocationSupportUsingPHP【发布时间】：2010-11-3010:50:07【问题描述】：我需要使用PHP检测HTML5地理定位支持，以便我可以加载支持使用IP地址进行地理定位的备份JavaScript。如何使... 查看详情

使用 html5 地理定位 api 创建地理围栏

】使用html5地理定位api创建地理围栏【英文标题】：Creatingageofencewithhtml5geolocationapi【发布时间】：2015-03-2523:44:48【问题描述】：我正在考虑使用HTML5地理定位API来检查用户是否在特定位置。但是，我想对此宽容一些，所以我希望... 查看详情

html5geolocation（地理定位）用于定位用户的位置。

定位用户的位置HTML5GeolocationAPI用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。浏览器支持InternetExplorer9、Firefox、Chrome、Safari以及Opera支持地理定位。注释：对于拥有GPS... 查看详情

如何给安卓手机定位

参考技术A问题一：如何设置安卓系统打开定位位置要不然，即使在已连接网络的情况下，也不能使用定位置。现在就来设置定位位置吧！以原道N10辑写攻略。步骤如下：（1）在主屏幕上按下“设置（Menu）”键。（2）在系统设... 查看详情

基于浏览器的html5地理定位

地理位置（Geolocation）是HTML5的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下HTML5地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo，获取... 查看详情

带有地理围栏的 html5 地理定位 API

...布时间】：2018-05-2116:28:58【问题描述】：我正在开发一个使用HTML5GeolocationAPI的项目，目前正在使用socket.io来允许用户在远程位置定位其他人。现在我的下一个目标是我希望我的应用程序创建某种地理围栏，如果用户在边界之外... 查看详情