H5地理定位获取用户当前位置、城市
第一步:需要在百度地图开发者平台创建一个应用:http://lbsyun.baidu.com/apiconsole/key/create
配置信息

申请配置成功以后返回一个AK

第二步:引入百度地图的js脚本,地址为http://api.map.baidu.com/api?v=2.0&ak=(申请应用的AK)

第三步:通过BMap.Geolocation()和getCurrentPosition(function(){})函数进行定位操作,代码如下图
//获取当前城市
var geolocation=new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus()==BMAP_STATUS_SUCCESS){
var lat=r.address.lat//当前经度
var lng=r.address.lng//当前纬度
var province=r.address.province //返回当前省份
var city=r.address.city//返回当前城市
console.log(city)
$('.cityName').text(city)
}
})
H5地理定位获取用户当前位置、城市的更多相关文章
- 手机端网页使用html5地理定位获取位置失败的解决办法
网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...
- 微信小程序:获取地理定位和显示相应的城市名称。
最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案 ...
- 获取用户当前位置信息的两种方法——H5、微信
在之前的 调用百度地图API的总结 中获取当前位置信息我用的是 H5 ,其实微信也提供了获取用户地理位置的方法,现将这两种方法都贴出来,看情况选择使用. 一.H5 获取当前地理位置得到经纬度 // H ...
- html5获取用户当前位置
支持地理定位的浏览器有IE9+.Firefox 3.5+ .Opera 10.6+ .Safari 5+ .Chrome.iOS 版Safari.Android版WebKit. navigator.g ...
- iOS下获取用户当前位置的信息
#import <MapKit/MKMapView.h> @interface ViewController (){ CLLocationManager *_currentLoaction ...
- HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...
- 微信小程序之获取用户位置权限(拒绝后提醒)
微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...
- 基于浏览器的HTML5地理定位
基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...
- 使用navigator.geolocation来获取用户的地理位置信息
使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...
随机推荐
- 「CF815C」Karen and Supermarket
传送门 Luogu 解题思路 树形背包. 设 \(f[i][j][0/1]\) 表示在以 \(i\) 为根的子树中选 \(j\) 件商品的最少花费. 边界条件: \(f[i][j][0] = \min ...
- 【Go语言系列】1.4、GO语言简介:第一个Go语言程序
接下来我们来编写第一个 Go 程序 hello.go(Go 语言源文件的扩展是 .go),代码如下: // 声明 main 包 package main import ( "fmt" ...
- python学习笔记:分支 与 循环
if 语句 if 条件: ...... # 条件为真的时候,执行缩进的代码 if 条件: ...... # 条件为真的时候执行 else: ...... # 条件为假的时候执行 if 条件1: ... ...
- 《开课》---创业学习--训练营直播第一课--HHR
1,分享三点:敬畏心,学习过程,带着目标学习. 2,融资是个非常专业的技术活. 3,一定不要盲目自信,在资本市场,融资永远是个小概率事件. 4,学习过程:每周解锁学习资料,固定的时间来进行作业答疑. ...
- float,double,int的区别
int num = 10/4; float num2 = 10/4; double num3 = 10.0/4.0; System.out.println(num); System.out.print ...
- Nexus-vPC与FHRP
去往vPC的流量,如何可能将会被本地的vPC成员端口所转发.FHRP的行为是被修改的,所有的FHRP路由器都会主动转发从vPC收到的流量.修改结果:如果可能,流量避免使用Peer link,这样创建一 ...
- JAVA面向对象解决实际问题实例(一)
某次战役中,为便于信息交互,我军侦察部门将此次战役的关键高地坐标设定为(x=0,y=0)并规定,每向东增加100米,x加1,每向北增加100米,y加1.同时,我军情报部门也破译了敌军向坦克发送的指挥信 ...
- Update(Stage4):Spark Streaming原理_运行过程_高级特性
Spark Streaming 导读 介绍 入门 原理 操作 Table of Contents 1. Spark Streaming 介绍 2. Spark Streaming 入门 2. 原理 3 ...
- %E3%80%90%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B%E3%80%91
"%3Cdiv%20class%3D%22htmledit_views%22%20id%3D%22content_views%22%3E%0A%20%20%20%20%20%20%20%20 ...
- 「NOI2006」最大获利
「NOI2006」最大获利 传送门 最小割. 对于每一组用户群 \(A_i, B_i, C_i\) ,连边 $S \to A_i, S \to B_i, $ 容量为成本,还有 \(i \to T\) ...