AngularJs 利用百度地图API 定位当前位置 获取地址信息


Posted in Javascript onJanuary 18, 2017

第一、申请百度密钥  很简单的几步就搞定

第二、引入文件

<!-- 百度地图定位 -->
<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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
起点页面传值js,有空研究学习下
Jan 25 Javascript
jquery uaMatch源代码
Feb 14 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
jQuery Masonry瀑布流插件使用方法详解
Jan 18 #Javascript
js实现消息滚动效果
Jan 18 #Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 #Javascript
微信小程序的动画效果详解
Jan 18 #Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 #Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 #Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 #Javascript
You might like
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
python自动化测试之连接几组测试包实例
2014/09/28 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python中map的基本用法示例
2018/09/10 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
单位授权委托书范本
2014/09/26 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
vue的项目如何打包上线
2022/04/13 Vue.js