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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
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 年龄计算函数(精确到天)
2012/06/07 PHP
PHP计数器的实现代码
2013/06/08 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
星球大战与Python之间的那些事
2016/01/07 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
对python3新增的byte类型详解
2018/12/04 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python处理“
2019/06/10 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python主要用于哪些方向
2020/07/05 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
文员个人求职自荐信
2013/09/21 职场文书
会计职业生涯规划范文
2014/01/04 职场文书
正科级干部考察材料
2014/05/29 职场文书
毕业生求职信范文
2014/06/29 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server