使用JS获取当前地理位置方法汇总

今年的项目开发中，初步接触了移动端WEB开发，也就边学习HTML5边开发，主要使用了JQuery Mobile技术，发现这个不适合做互联网产品，大部分样式都需要重写，只用了部分功能。手机端WEB开发过程中第一次接触了定位功能，通过各大搜索引擎发现手机端定位都是通过浏览器的定位，而用在PC端浏览器第一次会弹出提示“是否开启定位功能”，Boss看到这个提示，却觉得对用户的体验效果不好，不好那我换一种方式实现不就好了，这又不是多大的事，而Boss的脸色就大变，就说：不应该有这样的体验。我们这样做不都是为了赶时间，能够尽快将新功能发布嘛。

　　1.手机WEB定位方法：

代码如下:

获取定位成功回调函数，errorFunc获取定位失败回调 //首先设置默认城市 var defCity = { id: '000001', name: '北京市', date: curDateTime()//获取当前时间方法 }; //默认城市 $.cookie('VPIAO_MOBILE_DEFAULTCITY',JSON.stringify(defCity),{ expires: 1,path: '/' }); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { var lat = position.coords.latitude; var lon = position.coords.longitude; //var map = new BMap.Map("container"); // 创建Map实例 var point = new BMap.Point(lon,lat); // 创建点坐标 var gc = new BMap.Geocoder(); gc.getLocation(point,function (rs) { var addComp = rs.addressComponents; var curCity = { id: '', name: addComp.province, date: curDateTime() }; //当前定位城市 $.cookie('VPIAO_MOBILE_CURRENTCITY',JSON.stringify(curCity),{ expires: 7,path: '/' }); //alert(addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street); if (successFunc != undefined) successFunc(addComp); }); }, function (error) { switch (error.code) { case 1: alert("位置服务被拒绝。"); break; case 2: alert("暂时获取不到位置信息。"); break; case 3: alert("获取位置信息超时。"); break; default: alert("未知错误。"); break; } var curCity = { id: '000001', date: curDateTime() }; //默认城市 $.cookie('VPIAO_MOBILE_DEFAULTCITY',path: '/' }); if (errorFunc != undefined) errorFunc(error); },{ timeout: 5000,enableHighAccuracy: true }); } else { alert("你的浏览器不支持获取地理位置信息。"); if (errorFunc != undefined) errorFunc("你的浏览器不支持获取地理位置信息。"); } }; var showPosition = function (position) { var lat = position.coords.latitude; var lon = position.coords.longitude; //var map = new BMap.Map("container"); // 创建Map实例 var point = new BMap.Point(lon," + addComp.street); }); }; var showPositionError = function (error) { switch (error.code) { case 1: alert("位置服务被拒绝。"); break; case 2: alert("暂时获取不到位置信息。"); break; case 3: alert("获取位置信息超时。"); break; default: alert("未知错误。"); break; } var curCity = { id: '000001',path: '/' }); };

前提要引入百度API：

　　2.PC端通过IP实现方法：

　　采用腾讯提供的接口，这个目前已经不能使用了　　

代码如下:

　　采用新浪接口：

　　多地域测试方法：

代码如下:

PHP?format=js',function(_result) {
 if (remote_ip_info.ret == '1') {
 alert('国家：' + remote_ip_info.country + '
省：' + remote_ip_info.province + '
市：' + remote_ip_info.city + '
区：' + remote_ip_info.district + '
ISP：' + remote_ip_info.isp + '
类型：' + remote_ip_info.type + '
其他：' + remote_ip_info.desc);
 } else {
 alert('没有找到匹配的IP地址信息！');
 }
 });

　　网易有道IP地址接口（这个有待测试）

　　地址

淘宝请求接口（GET）

代码如下:

var ip = "124.127.108.133"; var url = "=" + ip; $.getJSON(url,function (json) { var myprovince2 = json.data.area; var mycity2 = json.data.region; alert("您所在的城市是：" + myprovince2 + mycity2); });

　　太平洋IP地址库API接口

　　地址字符串]

　　另外：还有google、搜狐等提供对应的接口，大家可以自己试一试。

　　搜狐IP地址查询接口（默认GBK）：

搜狐IP地址查询接口（可设置编码）：

搜狐另外的IP地址查询接口：