在很多情况下，我们需要用到定位功能，来获取用户当前位置。当前比较流行的定位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获取用户当前地理位置（省、市、经纬度）的更多相关文章

  1. js获取用户实时地理位置

    js获取用户实时地理位置 if(navigator.geolocation) { var id = navigator.geolocation.watchPosition(function(posit ...

  2. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

  3. 如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介

    如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介 一.总结 一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...

  4. web网站如何获取用户的地理位置

    web网站如何获取用户的地理位置 一.总结 一句话总结:通过gps知道用户的经度和纬度,然后通过经度和纬度在在地图(google或者百度)上面显示位置. 1.html5如何通过gps知道用户的经度和纬 ...

  5. 使用原生js 获取用户访问项目的浏览器类型

    想要获取浏览器的类型很简单,网上提供了很多方法,但是看过之后,都是根据浏览器内核来判断是ie,谷歌,火狐,opeara的, 所以不能进一步判断在国内使用的主流浏览器类型,比如360,百度,搜狐浏览器等 ...

  6. JS获取用户的Ip地址

    在网站中通常需要获取使用者的ip地址,获取抵制的方式有很多,这里就简单介绍一下js获取用户ip地址 /*使用的新浪的ip查询api,根据返回的数据进行判断*/ <script src=" ...

  7. 手机端获取用户详细地理位置（高德地图API）

    项目开发需要获取用户详细的地理位置信息,使用了高德地图API接口 1,注册高德地图开发者账号获取开发者Key 2,页面调用 <script type="text/javascript& ...

  8. JS获取用户控件中的子控件Id

    用户控件 <asp:HiddenField ID="hfGradeId" runat="server" /> <asp:HiddenField ...

  9. 使用纯真IP库获取用户端地理位置信息

    引言 在一些电商类或者引流类的网站中经常会有获取用户地理位置信息的需求,下面我分享一个用纯真IP库获取用户地理位置信息的方案. 正文 第一步:本文的方案是基于纯真IP库的,所以首先要去下载最新的纯真I ...

随机推荐

  1. 题解【AcWing902】最短编辑距离

    题面 经典的最长公共子序列模型. 我们设 \(dp_{i,j}\) 表示 \(a_{1...i}\) 与 \(b_{1...j}\) 匹配上所需的最少操作数. 考虑删除操作,我们将 \(a_i\) 删 ...

  2. [AtCoder Code Festival 2017 QualB D/At3575] 101 to 010 - dp

    [Atcoder Code Festival 2017 QualB/At3575] 101 to 010 有一个01序列,每次可以选出一个101,使其变成010,问最优策略下能操作几次? 考虑像 11 ...

  3. C++——指针4

    8.对象指针  声明: 类名 *对象指针名 Point A(5,10): Point *ptr; ptr=&A;//通过指针访问对象成员:对象指针名->成员名.ptr->getX( ...

  4. Python-selenium，使用SenKey模块时所碰到的坑

    一.SenKey模块(模拟鼠标键盘操作) :python3中没有该模块,使用PyUserInput模块代替 二.PyUserInput模块安装前需要安装:pywin32和pyHook模块,pywin3 ...

  5. asp.net中正则表达式使用

    一.限定符:限定符提供了一种简单方法,用于指定允许特定字符或字符集自身重复出现的次数.限定符始终引用限定符前(左边)的模式,通常是单个字符,除非使用括号创建模式组. (一)非显示限定符 1. *,描述 ...

  6. Nessus安装出现localhost：8834无法访问

    1.下载Nessus https://www.tenable.com/downloads/nessus#download 2.安装方法 详细安装方法参考下文 https://www.ld80.cn/a ...

  7. 在多租户（容器）数据库中如何创建PDB：方法5 DBCA远程克隆PDB

    基于版本:19c (12.2.0.3) AskScuti 创建方法:DBCA静默远程克隆PDB.将 CDB1 中的 PDB1 克隆为 CDB2 中的 ERP2 对应路径:Creating a PDB ...

  8. crowdfunding项目03——mapper映射错误

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'TAd ...

  9. 手写基于Promise A+规范的Promise

    const PENDING = 'pending';//初始态const FULFILLED = 'fulfilled';//初始态const REJECTED = 'rejected';//初始态f ...

  10. 第三十三篇 玩转数据结构——红黑树（Read Black Tree）

    1.. 图解2-3树维持绝对平衡的原理: 2.. 红黑树与2-3树是等价的 3.. 红黑树的特点 简要概括如下: 所有节点非黑即红:根节点为黑:NULL节点为黑:红节点孩子为黑:黑平衡 4.. 实现红 ...