js獲取用戶當前地理位置（省、市、經緯度）

在不少狀況下，咱們須要用到定位功能，來獲取用戶當前位置。當前比較流行的定位API有騰訊地圖、百度地圖、高德地圖、搜狗地圖等等，在這裏我使用的是騰訊地圖定位API，根據用戶IP獲取用戶當前位置，API返回結果詳細到區一級，包涵經緯度。javascript

1、騰訊地圖極簡的定位API——IP定位html

1.1請求參數（以下圖所示）：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　返回參數（以下圖所示）：前端

開發密鑰需在騰訊地圖官網申請，申請地址：http://lbs.qq.com/console/mykey.html），申請流程很簡單。java

詳情請見騰訊地圖官網-IP定位：http://lbs.qq.com/webservice_v1/guide-ip.html。jquery

1.2IP定位的優缺點：angularjs

優勢：極簡，易懂。不須要用戶地理位置受權，不須要引用插件，一個ajax徹底搞定。web

缺點：定位不許確，雖然說可定位到區一級，但實際上通常只能定位到市一級，偶爾還只能定位到省一級，此時就要用到手動定位了。ajax

1.3示例（此處的開發密鑰是我已經在騰訊申請好了的，若要引用，煩請去騰訊申請，申請流程很簡單。）json

1.31 jquery實現IP定位api

<!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>

2、騰訊地圖精準定位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>

3、結語

　　從個人使用經驗來看，騰訊地圖的定位並不足夠準確，只能定位到市一級，區一級常常獲取不到。可是個人需求只要到市一級，因此也夠用了。

　　想要定位足夠準確，要求精肯定位到區級，甚至精確到100米之內，須要調用高德地圖的API，只是高德地圖的開發者申請比較麻煩。高德地圖API請見：https://lbs.amap.com/api/

　　在這裏我只展現了騰訊地圖的定位功能，事實上騰訊定位涵括位置展現、路線規劃、地圖選點、前端定位、街景展現等等諸多強大的功能。此外，百度地圖、高德地圖等等，也都免費提供地圖API，值得咱們敬佩。

　　咱們都是站在巨人的肩膀上！