目前在做公司的一个网站，有个需求是：当别人进入网站时自动定位他的地理位置，包括市区，方便给他推荐当前城市的特色信息。
其实，这也是一个非常实用的功能，在网上搜到很多，有的不能用，现将我整理的两个能用的记录一下，以便后续再使用。
地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。在下面的demo中使用的是百度提供的api接口，调用html5的geolocation方法获取客户端当前经纬度，从而获得客户端所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。
值得注意的一点是，PC很多浏览器对于html5的定位技术是不太友好的，很多浏览器都是默认拒绝定位，一般只有IE是可以正常使用，但是获取到的经纬度偏差很大；相反在手机访问的时候，由于一般手机上都有GPS模块，所以定位效果会好很多，原因就在于手机上的GPS模块对geolocation特性的支持是很好的。结论是，html5的定位在手机上测试是最佳的选择，PC建议使用IE浏览器。
方案1：
<!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 {
// 否则浏览器不支持geolocation
alert('您的浏览器不支持地理位置定位！');
}
}
// 成功时的回调函数
// 第一步获取定位成功返回的经纬度数据，然后结合百度那边提供的接口进行具体位置的转换，最后还有一个数据提交的方法，要跟自己的业务操作了
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>方案2：
<!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) {
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(function (position) {
//经度
var longitude = position.coords.longitude;
//纬度
var latitude = position.coords.latitude;
thisSelf.loadMapApi(longitude, latitude);
}, thisSelf.onError, options);
} else {
//浏览器不支持geolocation
alert('您的浏览器不支持地理位置定位3333');
}
};
//定义一个可以解析经纬度的方法，调用百度的api
Location.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&ak=A396783ee700cfdb9ba1df281ce36862&services=&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、百度地图开放平台：http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld
2、用js定位当前的地理位置：https://www.cnblogs.com/zhuyupingit/p/6322204.html
3、Javascript学习总结 - html5实现定位地理位置：https://www.ucloud.cn/yun/21235.html
