AngularJs 利用百度地图API 定位当前位置 获取地址信息
第一、申请百度密钥 很简单的几步就搞定
第二、引入文件
<!--百度地图定位--> <scriptsrc="http://api.map.baidu.com/components?ak=WUfZTjKPuZ2G5RmgD0Psejv6XOmIEQVQ"></script> <scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=WUfZTjKPuZ2G5RmgD0Psejv6XOmIEQVQ"></script>
第三、绑定数据到你要显示的输入框内
完整地址：<inputtype="text"ng-model="all"/><br> 所处城市：<inputtype="text"ng-model="shi"/><br> 所处区域：<inputtype="text"ng-model="qu"/><br> 所处街道：<inputtype="text"ng-model="jiedao"/>
第四、控制器中代码
angular.module('myApp')
.controller('myCtrl',function($scope){
//获取地理位置信息
$scope.getAddr=function(){
vargeolocation=newBMap.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(){
varmyGeo=newBMap.Geocoder();
//根据坐标得到地址描述
myGeo.getLocation(newBMap.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("定位失败,地址解析失败");
}
});
};
}]);
第五、完整代码如下：(大体思路就是这样！这里做个标记留给以后的自己)
<!DOCTYPEhtml>
<html>
<metacharset="utf-8">
<scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<scriptsrc="http://api.map.baidu.com/components?ak=WUfZTjKPuZ2G5RmgD0Psejv6XOmIEQVQ"></script>
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=WUfZTjKPuZ2G5RmgD0Psejv6XOmIEQVQ"></script>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<buttontype="button"ng-click='getAddr()'>点击定位</button><br>
完整地址：<inputtype="text"ng-model="all"/><br>
所处城市：<inputtype="text"ng-model="shi"/><br>
所处区域：<inputtype="text"ng-model="qu"/><br>
所处街道：<inputtype="text"ng-model="jiedao"/>
</div>
<script>
varapp=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
//获取地理位置信息
$scope.getAddr=function(){
vargeolocation=newBMap.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(){
varmyGeo=newBMap.Geocoder();
//根据坐标得到地址描述
myGeo.getLocation(newBMap.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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！