第一、申请百度密钥 很简单的几步就搞定
第二、引入文件
<!-- 百度地图定位 --> <script src="http://api.map.baidu.com/components?ak=wufztjkpuz2g5rmgd0psejv6xomieqvq"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wufztjkpuz2g5rmgd0psejv6xomieqvq"></script>
第三、绑定数据到你要显示的输入框内
完整地址:<input type="text" ng-model="all"/><br> 所处城市:<input type="text" ng-model="shi"/><br> 所处区域:<input type="text" ng-model="qu"/><br> 所处街道:<input type="text" ng-model="jiedao"/>
第四、控制器中代码
angular.module('myapp') .controller('myctrl',function($scope) { //获取地理位置信息 $scope.getaddr = function() { var geolocation = new bmap.geolocation(); geolocation.getcurrentposition( //获取位置信息成功 function(position){ if(this.getstatus() == bmap_status_success){ $scope.longitude = position.point.lng; $scope.latitude = position.point.lat; // 根据坐标得到地址描述 $scope.getgeo(); } },{ // 指示浏览器获取高精度的位置,默认为false enablehighaccuracy: true, // 指定获取地理位置的超时时间,默认不限时,单位为毫秒 // timeout: 5000, // 最长有效期(30s),在重复获取地理位置时,此参数指定多久再次获取位置 maximumage: 30*1000 }); }; $scope.getgeo = function() { var mygeo = new bmap.geocoder(); // 根据坐标得到地址描述 mygeo.getlocation(new bmap.point($scope.longitude,$scope.latitude), function(result) { if (result) { $scope.geoaddress = { 'fulladdress' : result.addresscomponents.city+ result.addresscomponents.district+ result.addresscomponents.street, 'city' : result.addresscomponents.city, 'area' : result.addresscomponents.district, 'street' : result.addresscomponents.street, }; $scope.all = result.addresscomponents.city+ result.addresscomponents.district+ result.addresscomponents.street; $scope.shi = result.addresscomponents.city; $scope.qu = result.addresscomponents.district; $scope.jiedao = result.addresscomponents.street; alert(json.stringify($scope.all)) } else { $scope.showalert("定位失败,地址解析失败"); } }); }; } ]);
第五、完整代码如下:(大体思路就是这样!这里做个标记留给以后的自己)
<!doctype html> <html> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://api.map.baidu.com/components?ak=wufztjkpuz2g5rmgd0psejv6xomieqvq"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wufztjkpuz2g5rmgd0psejv6xomieqvq"></script> <body> <div ng-app="myapp" ng-controller="myctrl"> <button type="button" ng-click='getaddr()'>点击定位</button><br> 完整地址:<input type="text" ng-model="all"/><br> 所处城市:<input type="text" ng-model="shi"/><br> 所处区域:<input type="text" ng-model="qu"/><br> 所处街道:<input type="text" ng-model="jiedao"/> </div> <script> var app = angular.module('myapp', []); app.controller('myctrl', function($scope) { //获取地理位置信息 $scope.getaddr = function() { var geolocation = new bmap.geolocation(); geolocation.getcurrentposition( //获取位置信息成功 function(position){ if(this.getstatus() == bmap_status_success){ $scope.longitude = position.point.lng; $scope.latitude = position.point.lat; // 根据坐标得到地址描述 $scope.getgeo(); } },{ // 指示浏览器获取高精度的位置,默认为false enablehighaccuracy: true, // 指定获取地理位置的超时时间,默认不限时,单位为毫秒 // timeout: 5000, // 最长有效期(30s),在重复获取地理位置时,此参数指定多久再次获取位置 maximumage: 30*1000 }); }; $scope.getgeo = function() { var mygeo = new bmap.geocoder(); // 根据坐标得到地址描述 mygeo.getlocation(new bmap.point($scope.longitude,$scope.latitude), function(result) { if (result) { $scope.geoaddress = { 'fulladdress' : result.addresscomponents.city+ result.addresscomponents.district+ result.addresscomponents.street, 'city' : result.addresscomponents.city, 'area' : result.addresscomponents.district, 'street' : result.addresscomponents.street, }; $scope.all = result.addresscomponents.city+ result.addresscomponents.district+ result.addresscomponents.street; $scope.shi = result.addresscomponents.city; $scope.qu = result.addresscomponents.district; $scope.jiedao = result.addresscomponents.street; alert(json.stringify($scope.all)) } else { $scope.showalert("定位失败,地址解析失败"); } }); }; }); </script> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持移动技术网!
如对本文有疑问, 点击进行留言回复!!
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论