js获取用户当前地理位置（省、市、经纬度）
在很多情况下，我们需要用到定位功能，来获取用户当前位置。当前比较流行的定位API有腾讯地图、百度地图、高德地图、搜狗地图等等，在这里我使用的是腾讯地图定位API，根据用户IP获取用户当前位置，API返回结果详细到区一级，包涵经纬度。
一、腾讯地图极简的定位API——IP定位
1.1请求参数（如下图所示）： 返回参数（如下图所示）：
开发密钥需在腾讯地图官网申请，申请地址：http://lbs.qq.com/console/mykey.html） ，申请流程很简单。
详情请见腾讯地图官网-IP定位：http://lbs.qq.com/webservice_v1/guide-ip.html。
1.2IP定位的优缺点：
优点：极简，易懂。不需要用户地理位置授权，不需要引用插件，一个ajax完全搞定。
缺点：定位不准确，虽说可定位到区一级，但实际上一般只能定位到市一级，偶尔还只能定位到省一级，此时就要用到手动定位了。
1.3示例（此处的开发密钥是我已经在腾讯申请好了的，若要引用，烦请去腾讯申请，申请流程很简单。）
1.31 jquery实现IP定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>腾讯定位-jquery</title>
<meta content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><!-- 引用谷歌jQuery -->
</head>
<body></body>
<script type="text/javascript">
$.ajax({
type: "get",//接口规定，只能用get
async: true,//异步
url: "https://apis.map.qq.com/ws/location/v1/ip",//接口地址
data: {"key":"PTMBZ-GCQLW-SC2RG-R2FNI-HWPNQ-4PBQM","output":"jsonp"},//参数格式必须用到output传参为jsonp，否则会报跨域问题
dataType: "jsonp",//跨域，必须用到jsonp
success: function(result){
console.log(JSON.stringify(result));
document.write(JSON.stringify(result));
},
error: function (XMLHttpRequest,textStatus,errorThrown){
console.log(JSON.stringify(XMLHttpRequest));
document.write(JSON.stringify(XMLHttpRequest));
}
});
</script>
</html>
1.32 angularjs实现IP定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>腾讯定位-ng</title>
<meta content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><!-- 引用angularjs -->
</head>
<body ng-app="myApp" ng-controller="getIPControl">{{loaction}}</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
//获取ip地址
app.controller("getIPControl",function($scope,$http){
$scope.loaction;//位置信息
QQmap = function(res){//腾讯定位返回函数，函数名只能为QQmap
console.log(res);
$scope.loaction = res;//渲染位置信息
};
//腾讯根据ip自动定位，QQmap为腾讯jsonp格式返回函数名，PTMBZ-GCQLW-SC2RG-R2FNI-HWPNQ-4PBQM为腾讯开发秘钥
$http.jsonp("https://apis.map.qq.com/ws/location/v1/ip?jsonp=QQmap&key=PTMBZ-GCQLW-SC2RG-R2FNI-HWPNQ-4PBQM&output=jsonp");
});
</script>
</html>
二、腾讯地图精准定位API——前端定位组件
2.1请求参数
返回参数：
详情请见腾讯地图官网-前端定位组件：http://lbs.qq.com/tool/component-geolocation.html。
2.2前端定位组件的优点：定位精准，一般能获取到区一级信息，只有偶尔获取不到。本质上这其实是地图组件，插件会在html页面上生成一个<iframe>标签，只要修改调用的函数及参数，就相当于在前端页面中插入一张腾讯地图。
2.3示例
2.31 jquery实现前端定位组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>腾讯定位-jquery</title>
<meta content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><!-- 引用谷歌jQuery -->
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script><!-- 引用腾讯前端定位插件，建议下载到本地 -->
</head>
<body></body>
<script type="text/javascript">
//实例化定位插件 定位获取地理位置信息，本插件只有在服务器上才能运行，不像IP定位，非服务器也能运行
var geolocation = new qq.maps.Geolocation("PTMBZ-GCQLW-SC2RG-R2FNI-HWPNQ-4PBQM","meizi2");//参数为:开发秘钥、开发秘钥名称
geolocation.getLocation(function(result){//定位成功
console.log(result);
document.write(JSON.stringify(result));
},function(error){//定位失败
console.log(error);
document.write(JSON.stringify(error));
});
</script>
</html>
2.32 angularjs实现前端定位组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>腾讯定位-ng</title>
<meta content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><!-- 引用angularjs -->
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script><!-- 引用腾讯前端定位插件，建议下载到本地 -->
</head>
<body ng-app="myApp" ng-controller="getLocationController">{{locationCity}}</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("getLocationController",function($scope,$http){
$scope.locationCity = "定位中";
//定位获取地理位置信息，本插件只有在服务器上才能运行，不像IP定位，非服务器也能运行
getLocation = function(func){
var geolocation = new qq.maps.Geolocation("PTMBZ-GCQLW-SC2RG-R2FNI-HWPNQ-4PBQM","meizi2");
geolocation.getLocation(function(result){//定位成功
$scope.locationCity = JSON.stringify(result);//用户定位城市
$scope.$applyAsync();//无法触发angular的自动刷新，手动刷新
console.log(result);
},function(error){//定位失败
$scope.locationCity = JSON.stringify(error);//用户定位城市
$scope.$applyAsync();//无法触发angular的自动刷新，手动刷新
console.log(result);
});
};
getLocation();//执行定位函数
});
</script>
</html>
三、结语
从我的使用经验来看，腾讯地图的定位并不足够准确，只能定位到市一级，区一级经常获取不到。但是我的需求只要到市一级，所以也够用了。
想要定位足够准确，要求精确定位到区级，甚至精确到100米以内，需要调用高德地图的API，只是高德地图的开发者申请比较麻烦。高德地图API请见：https://lbs.amap.com/api/
在这里我只展示了腾讯地图的定位功能，事实上腾讯定位涵括位置展示、路线规划、地图选点、前端定位、街景展示等等诸多强大的功能。此外，百度地图、高德地图等等，也都免费提供地图API，值得我们敬佩。
我们都是站在巨人的肩膀上！
js获取用户当前地理位置（省、市、经纬度）的更多相关文章
- js获取用户实时地理位置
js获取用户实时地理位置 if(navigator.geolocation) { var id = navigator.geolocation.watchPosition(function(posit ...
- 使用navigator.geolocation来获取用户的地理位置信息
使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...
- 如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介 一.总结 一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...
- web网站如何获取用户的地理位置
web网站如何获取用户的地理位置 一.总结 一句话总结:通过gps知道用户的经度和纬度,然后通过经度和纬度在在地图(google或者百度)上面显示位置. 1.html5如何通过gps知道用户的经度和纬 ...
- 使用原生js 获取用户访问项目的浏览器类型
想要获取浏览器的类型很简单,网上提供了很多方法,但是看过之后,都是根据浏览器内核来判断是ie,谷歌,火狐,opeara的, 所以不能进一步判断在国内使用的主流浏览器类型,比如360,百度,搜狐浏览器等 ...
- JS获取用户的Ip地址
在网站中通常需要获取使用者的ip地址,获取抵制的方式有很多,这里就简单介绍一下js获取用户ip地址 /*使用的新浪的ip查询api,根据返回的数据进行判断*/ <script src=" ...
- 手机端获取用户详细地理位置（高德地图API）
项目开发需要获取用户详细的地理位置信息,使用了高德地图API接口 1,注册高德地图开发者账号获取开发者Key 2,页面调用 <script type="text/javascript& ...
- JS获取用户控件中的子控件Id
用户控件 <asp:HiddenField ID="hfGradeId" runat="server" /> <asp:HiddenField ...
- 使用纯真IP库获取用户端地理位置信息
引言 在一些电商类或者引流类的网站中经常会有获取用户地理位置信息的需求,下面我分享一个用纯真IP库获取用户地理位置信息的方案. 正文 第一步:本文的方案是基于纯真IP库的,所以首先要去下载最新的纯真I ...
随机推荐
- go-web 获取get/post请求中的请求头和表单数据
package main import ( "fmt" "net/http" ) func handler(w http.ResponseWriter, r * ...
- Linux运维--14.Kolla部署OpenStack使用external MariaDB Galera Cluster
使用haproxy+keepalived实现Mariadb负载均衡 controller2: 10.100.2.52 haproxy+keepalived controller3: 10.100.2. ...
- 我的python笔记06
面向对象学习 本节内容: 面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法. 引子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做< ...
- 自定义Nginx返回页面
1.403返回页面 #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log noti ...
- ping和tracert
ping命令常用于测试2台主机网络是否连通 TTL的默认值有:64(linux),128(windows),255(路由器) 此例TTL是63所以选用64来减去63等于1,这是说明经过了1个路由器,没 ...
- Learning to See in the Dark论文阅读笔记
这是一篇图像增强的论文,作者创建了一个数据集合,和以往的问题不同,作者的创建的see in the dark(SID)数据集合是在极其暗的光照下拍摄的,这个点可以作为一个很大的contribution ...
- Allegro 串扰仿真
利用于博士的那个电路板,看一下cadence软件的串扰仿真,我们选取3跟信号线,见下图. U6.N3-R36-U7.56 U6.P3-R36-U7.54 U6.P2-R36-U7.53 下面启动sig ...
- Window逆向基础之逆向工程介绍
逆向工程 以设计方法学为指导,以现代设计理论.方法.技术为基础,运用各种专业人员的工程设计经验.知识和创新思维,对已有产品进行解剖.深化和再创造. 逆向工程不仅仅在计算机行业.各行各业都存在逆向工程. ...
- codeforces 1282C. Petya and Exam （贪心）
链接:https://codeforces.com/contest/1282/problem/C 题意: 有一个人参加考试,考试只有两种题,一种是简单题,每道题耗时固定为a:另一种是困难题,每道题耗 ...
- thinkphp 二级域名绑定模块，导致设置的路由被多域名共用的问题解决方案
问题背景: 在router.php路由配置文件设置了二级域名和路由设置 use think\Route; Route::domain('www','index'); Route::domain('ad ...