在很多情况下,我们需要用到定位功能,来获取用户当前位置。当前比较流行的定位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 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><!-- 引用谷歌jQuery --> </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——前端定位组件