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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
vue修饰符.capture和.self的区别
Apr 22 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
终于听上了直流胆调频
2021/03/02 无线电
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php读取msn上的用户信息类
2008/12/05 PHP
php使用curl访问https示例分享
2014/01/17 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
vue实现通讯录功能
2018/07/14 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
Python实现Linux中的du命令
2017/06/12 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
教师工作态度自我评价
2015/03/05 职场文书
教师求职简历自我评价
2015/03/10 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏