一、背景描述

目前在做公司的一个网站，有个需求是：当别人进入网站时自动定位他的地理位置，包括市区，方便给他推荐当前城市的特色信息。

其实，这也是一个非常实用的功能，在网上搜到很多，有的不能用，现将我整理的两个能用的记录一下，以便后续再使用。

地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。在下面的demo中使用的是百度提供的api接口，调用html5的geolocation方法获取客户端当前经纬度，从而获得客户端所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。

值得注意的一点是，PC很多浏览器对于html5的定位技术是不太友好的，很多浏览器都是默认拒绝定位，一般只有IE是可以正常使用，但是获取到的经纬度偏差很大；相反在手机访问的时候，由于一般手机上都有GPS模块，所以定位效果会好很多，原因就在于手机上的GPS模块对geolocation特性的支持是很好的。结论是，html5的定位在手机上测试是最佳的选择，PC建议使用IE浏览器。

二、实现方案

方案一

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><!--下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。--><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>JS获取当前地理位置的方法</title>
</head><body>
<!--可以自己定义body体内容-->
</body><!--引用百度地图API文件， 您的秘钥的获取方式是注册为百度地图的开发者，创建应用-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
<script type="text/javascript">// 创建一个函数，主要功能是在调用html5的geolocation()前，先判断当前浏览器是否支持html5，（PC绝大部分浏览器不支持或者拒绝html5定位）function getLocation() {var options = {enableHighAccuracy: true,maximumAge: 1000};alert('获取位置信息开始--------->');if (navigator.geolocation) {// 走到这里说明，浏览器支持geolocation，参数里有两个回调函数，一个是定位成功后的处理操作，一个是定位失败后的处理操作，另外一个参数没有研究过navigator.geolocation.getCurrentPosition(onSuccess, onError, options);} else {// 否则浏览器不支持geolocationalert('您的浏览器不支持地理位置定位！');}}// 成功时的回调函数// 第一步获取定位成功返回的经纬度数据，然后结合百度那边提供的接口进行具体位置的转换，最后还有一个数据提交的方法，要跟自己的业务操作了function onSuccess(position) {// 返回用户位置// 经度var longitude = position.coords.longitude;// 纬度var latitude = position.coords.latitude;alert('您的当前地址的经纬度：经度' + longitude + '，纬度' + latitude);// 根据经纬度获取地理位置，不太准确，获取城市区域还是可以的var map = new BMap.Map("allmap");var point = new BMap.Point(longitude, latitude);var gc = new BMap.Geocoder();gc.getLocation(point, function (rs) {var addComp = rs.addressComponents;alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);});// 这里后面可以写你的后续操作了handleData(longitude, latitude);}// 失败时的回调函数// 这里是错误提示信息function onError(error) {switch (error.code) {case 1:alert("位置服务被拒绝！");break;case 2:alert("暂时获取不到位置信息！");break;case 3:alert("获取信息超时！");break;case 4:alert("未知错误！");break;}// 这里后面可以写你的后续操作了，下面的经纬度是天安门的具体位置// 经度var longitude = 39.9151;// 纬度var latitude = 116.4041;handleData(longitude, latitude);}// 页面载入时请求获取当前地理位置window.onload = function () {// html5获取地理位置getLocation();};
</script>
</html>

方案二

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。--><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>html5实现地理位置定位</title>
</head>
<body>
您目前所在的区域为：<p></p>
</body><!--引用百度地图API文件， 您的秘钥的获取方式是注册为百度地图的开发者，创建应用-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
<script>//定义一个空的位置构造函数function Location() {};//定义一个可以获得经纬度的方法Location.prototype.getLocation = function (callback) {var options = {enableHighAccuracy: true,maximumAge: 1000};this.callback = Object.prototype.toString.call(callback) == "[object Function]" ?callback :function (address) {alert(address.province + address.city);console.log("getLocation(callbackFunction) 可获得定位信息对象");};var thisSelf = this;if (navigator.geolocation) {//浏览器支持geolocationnavigator.geolocation.getCurrentPosition(function (position) {//经度var longitude = position.coords.longitude;//纬度var latitude = position.coords.latitude;thisSelf.loadMapApi(longitude, latitude);}, thisSelf.onError, options);} else {//浏览器不支持geolocationalert('您的浏览器不支持地理位置定位3333');}};//定义一个可以解析经纬度的方法，调用百度的apiLocation.prototype.loadMapApi = function (longitude, latitude) {var thisSelf = this;var oHead = document.getElementsByTagName('HEAD').item(0);var oScript = document.createElement("script");oScript.type = "text/javascript";oScript.src = "http://api.map.baidu.com/getscript?v=2.0&amp;ak=A396783ee700cfdb9ba1df281ce36862&amp;services=&amp;t=20140930184510";oHead.appendChild(oScript);oScript.onload = function (date) {var point = new BMap.Point(longitude, latitude);var gc = new BMap.Geocoder();gc.getLocation(point, function (rs) {var addComp = rs.addressComponents;thisSelf.callback(addComp);});}};//定义出现查询位置出现意外的方法Location.prototype.onError = function (error) {switch (error.code) {case 1:alert("位置服务被拒绝");break;case 2:alert("暂时获取不到位置信息");break;case 3:alert("获取信息超时");break;case 4:alert("未知错误");break;}};//调用var local = new Location();local.getLocation(function (res) {var str = "";for (i in res) {str = res[i] + str;}document.querySelector("p").innerHTML = str;})
</script>
</html>

【参考资料】

1、百度地图开放平台： JavaScript API - 快速入门 | 百度地图API SDK

2、用js定位当前的地理位置：用js定位当前的地理位置 - 风的味道真好闻 - 博客园

3、Javascript学习总结 - html5实现定位地理位置：Javascript学习总结 - html5实现定位地理位置_PHP - UCloud云社区

完结！

【前端用法】html5实现地理位置定位（JS获取当前地理位置的方法）相关推荐

网页JS获取当前地理位置（省市区）
网页JS获取当前地理位置(省市区) 眼看2014又要过去了,翻翻今年的文章好像没有写几篇,忙真的或许已经不能成为借口了,在忙时间还是有的,就像海绵里的水挤挤总会有滴.真真的原因是没有学习过什么新的技术 ...
用JS获取地址栏参数的方法
用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg ...
JS获取DOM元素的方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
php接收键盘事件,js获取键盘事件的方法实例
本文主要和大家分享js获取键盘事件的方法实例,希望能帮助到大家. document.οnkeydοwn=function(event){ var e = event || window.event | ...
js获取checkbox值的方法
js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...
js获取最大整数的方法
js获取最大整数的方法 1.Math.max(x1,x2,...) 方法可返回指定的数中带有较大的值的那个数. 参数:0或多个参数返回值:参数中最大的值.如果没有参数,则返回 -Infinity.如 ...
js获取url参数值的方法总结
js获取url参数值的方法总结 1.方式一:通过字符串截取的方式获取参数值: 2.方式二:通过正则获取到参数值: 1.方式一:通过字符串截取的方式获取参数值: 1).函数一:获取URL中的参数名及 ...
php获取扫码枪的内容,一起看看js获取扫码枪输入数据的方法_WEB前端开发
代码详解Vue中key的作用示例_WEB前端开发 key的特殊attribute主要用在Vue的虚拟DOM算法,在新旧Nodes对比时辨识VNodes,这篇文章主要给大家介绍Vue中key的作用,感兴 ...

【前端用法】html5实现地理位置定位（JS获取当前地理位置的方法）

一、背景描述

二、实现方案

方案一

方案二

【前端用法】html5实现地理位置定位（JS获取当前地理位置的方法）相关推荐

最新文章

热门文章