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验证表单大全
Nov 25 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
详解Node.js开发中的express-session
May 19 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
解决layui表格的表头不滚动的问题
Sep 04 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
js实现拖动缓动效果
Jan 13 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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
论建造顺序的重要性
2020/03/04 星际争霸
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Python实现点云投影到平面显示
2020/01/18 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
施工班组长岗位职责
2014/01/05 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
小学优秀教师材料
2014/12/15 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
英文版辞职信
2015/02/28 职场文书
同意报考公务员证明
2015/06/17 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技