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

最新推荐文章于 2019-03-29 14:00:16 发布

pandongzi_2017

最新推荐文章于 2019-03-29 14:00:16 发布

阅读量4.9k

点赞数 1

分类专栏： angualrjs 学习整理笔记文章标签： api 百度地图 angularjs 百度定位

本文链接：https://blog.csdn.net/pandongzi_2017/article/details/54601166

版权

angualrjs 学习整理笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

第二、引入文件

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