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 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
基于javascript实现放大镜特效
2020/12/03 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python获取服务器响应cookie的实例
2018/12/28 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
监理资料员岗位职责
2014/01/03 职场文书
护理不良事件检讨书
2014/02/06 职场文书
怀念母亲教学反思
2014/04/28 职场文书
给校长的建议书400字
2014/05/15 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
公司开业主持词
2015/07/02 职场文书
Python实现位图分割的效果
2021/11/20 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis