AngularJs 利用百度地图API 定位当前位置 获取地址信息
第一、申请百度密钥 很简单的几步就搞定
第二、引入文件
<!-- 百度地图定位 --> <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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
Android百度地图定位后获取周边位置的实现代码
本文实例讲解Android百度地图定位后获取周边位置的实现代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical&q
-
nodejs根据ip数组在百度地图中进行定位
利用node接收到的ip数组组装url后对百度地图api发送请求并返回请求结果数组给前端 1. 前端代码部分(jquery) 重要步骤: 1> 引用百度地图 2> 实例化百度地图,添加相关缩放控件,设置主图 3> 重写http请求,设置contentType并对请求数据作转化为json对象处理 4> 发送请求数据,将请求结果转化成可处理对象 5> 根据响应结果的经纬度进行定位,添加默认覆盖物和iplabel <script type="text/javascr
-
微信小程序 地图定位简单实例
微信小程序开发地图定位. 微信小程序 刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下 要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.
-
js实现百度地图定位于地址逆解析，显示自己当前的地理位置
话不多说,随小编一起看看实例代码吧 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type=&qu
-
javascript+mapbar实现地图定位
本文地图使用的是图地图 图吧地图在线API地址http://union.mapbar.com/apidoc/离线CHM格式 下载地址: http://union.mapbar.com/apidoc/chm/mapbarapi.rar 效果图: Mapbar 地图 API 让您可以使用 JavaScript 将 Mapbar地图嵌入您自己的网页中.API 提供了许多方法与地图交互(正如http://www.mapbar.com/localsearch/index.html 网页上显示的),以及一系
-
Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二.编写MyApplication类 public class MyApplication extends Application { private static MyApplication mInstance = null; public boolean m_bKeyRight = true; pu
-
基于Android实现百度地图定位过程详解
一.问题描述 LBS位置服务是android应用中重要的功能,应用越来越广泛,下面我们逐步学习和实现lbs相关的应用如定位.地图.导航等,首先我们看如何基于百度地图实现定位功能 二.配置环境 1.注册密钥:地址http://developer.baidu.com/map/ 2.下载定位SDK,并导入SDK如图所示: 三.编写MyApplication类 编写MyApplication类,为了使用方便我们可以将实现定位的方法封装的Application组件中 封装下列方法 1. 获取定位信息--
-
ios百度地图的使用（普通定位、反地理编码）
iOS定位 - 普通定位(没有地图) - 反地理编码(得到具体位置),下面通过代码给大家详解,代码如下: #import <CoreLocation/CoreLocation.h> 使用到的头文件 要引入CoreLocation这个包 <CLLocationManagerDelegate> 使用的代理名称 //1.使用定位服务 //设置app有访问定位服务的权限 //在使用应用期间 / 始终(app在后台) //info.plist文件添加以下两条(或者其中一条): //NSLoc
-
AngularJs 利用百度地图API 定位当前位置 获取地址信息
第一.申请百度密钥 很简单的几步就搞定 第二.引入文件 <!-- 百度地图定位 --> <script src="http://api.map.baidu.com/components?ak=WUfZTjKPuZ2G5RmgD0Psejv6XOmIEQVQ"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2
-
利用百度地图API获取当前位置信息的实例
利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: <script type="text/javascript"> var map; var gpsPoint; var baiduPoint; var gpsAddress; var baiduAddress; var x; var y; function getLocation() { //根据IP获取城市 var myCity = new BMap.
-
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,cookies,post或get验证等)访问目标站点的服务器: 2.解析服务器返回的文档,提取需要的信息. 而API的工作机制与爬虫的两步类似,但也有些许不同: 1.API一般只需要设置url即可,且请求方式一般为"get"方式 2.API服务器返回的通常是json或xml格式的数据,解析更简
-
javascript使用百度地图api和html5特性获取浏览器位置
复制代码 代码如下: <!DOCTYPE html><html><body><p id="demo">点击这个按钮,获得您的位置:</p><button onclick="getLocation()">试一下</button><script src="http://api.map.baidu.com/api?v=1.4" type="text/ja
-
百度地图api如何使用
如果想用百度地图api,首先需要先获取一个百度地图api的密钥,然后引入百度地图的api,接下来,我们详细介绍下获取.引入api密钥的技巧,以及通过代码给大家详解下百度地图api如何使用,具体请看下文. 首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥. 申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了. 接下来,就是引入百度地图的api 关键代码如下: 复制代码 代码如下: <script type="text/javascrip
-
python通过百度地图API获取某地址的经纬度详解
前言 这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的,本文将给大家详细的介绍关于python通过百度地图API获取某地址的经纬度的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 申请百度API 1.打开网页 http://lbsyun.baidu.com/index.php?title=首页 选择功能与服务中的地图,点击左边的获取密匙,然后按照要求申请即可,需要手机和百度账号
-
利用百度地图Android sdk高仿微信发送位置功能及遇到的问题
接触了百度地图开发平台半个月了,这2天试着模仿了微信给好友发送位置功能,对百度地图的操作能力又上了一个台阶 我在实现这个功能的时候,遇到一些困难,可能也是别人将会遇到的困难,特在此列出 1.在微信发送功能中,不管用户如何拖拽地图,总有个覆盖物固定了MapView中央,怎么实现? 其实这很容易实现,只要MapView的布局文件中,将一个ImageView覆盖在MapView的中央,就能够实现不管用户如何拖拽地图,覆盖物(ImageView)总固定总MapView中央 2.如何获取MapView中央
-
百度地图API应用之获取用户的具体位置
功能的大概:用户通过点击地图上面的位置,在地图上面进行描点,然后再把获取的到的地理位置保存到地图上面的地址栏目中. 主要是百度地图API的使用 复制代码 代码如下: var map = new BMap.Map("allmap"); //实例化一个地图对象var point = new BMap.Point(116.331398,39.897445); //设置地图中心的位置map.centerAndZoom(point,12); //设置地图元素的可视层 map.enableScro
-
利用python和百度地图API实现数据地图标注的方法
如题,先上效果图: 主要分为两大步骤 使用python语句,通过百度地图API,对已知的地名抓取经纬度 使用百度地图API官网的html例程,修改数据部分,实现呈现效果 一.使用python语句,通过百度地图API,获取经纬度读取文件信息 import pandas as pd data = pd.read_excel('test_baidu.xlsx') data 图中可以看出,原始数据并没有经纬度. 2. 构建抓取经纬度函数 import json from urllib.request i
-
JavaScript接入百度地图API的方法步骤
目录 一.百度地图API接入 二.在HTML中使用百度地图API 1.在html中引入百度地图js文件 2.在网页中定义一个DIV用于显示地图 3.在网页中显示地图 4.添加可选控件 5.定位功能 6.添加地图标记 7.给地图标记添加点击事件 8.添加信息窗口 9.路径规划 10.正逆地址解析 一.百度地图API接入 1.搜索百度地图开发平台 2.注册百度账号 3.登陆并申请成为开发者 4.在百度地图开发平台的首页选择控制台,在控制台中创建应用 创建好应用以后就能在控制台我的应用中看到这个应用,