第一步:需要在百度地图开发者平台创建一个应用: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地理定位获取用户当前位置、城市的更多相关文章

  1. 手机端网页使用html5地理定位获取位置失败的解决办法

    网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...

  2. 微信小程序:获取地理定位和显示相应的城市名称。

    最近在看微信小程序,遇到地理定位显示城市名称的问题.本文就是记录这一过程. 解决方案                                                          ...

  3. 获取用户当前位置信息的两种方法——H5、微信

    在之前的 调用百度地图API的总结 中获取当前位置信息我用的是 H5 ,其实微信也提供了获取用户地理位置的方法,现将这两种方法都贴出来,看情况选择使用. 一.H5 获取当前地理位置得到经纬度 // H ...

  4. html5获取用户当前位置

    支持地理定位的浏览器有IE9+.Firefox 3.5+ .Opera 10.6+ .Safari 5+ .Chrome.iOS 版Safari.Android版WebKit. navigator.g ...

  5. iOS下获取用户当前位置的信息

    #import <MapKit/MKMapView.h> @interface ViewController (){ CLLocationManager *_currentLoaction ...

  6. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  7. 微信小程序之获取用户位置权限(拒绝后提醒)

    微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...

  8. 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  9. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

随机推荐

  1. 前端 9.16腾讯-2019校园招聘(正式卷)编程题题解(js)

    第一题 和谐的数字 牛牛很喜欢研究数字.一天,他发明了一种数字,叫做“和谐的数字”. 和谐的数字定义如下: 定义S(n)为数字n各位数字之和,如果S(n)能够整除n,那么就称n为一个“和谐的数字”. ...

  2. Windows事件ID

    51 Windows 无法找到网络路径.请确认网络路径正确并且目标计算机不忙或已关闭.如果 Windows 仍然无法找到网络路径,请与网络管理员联系. 52 由于网络上有重名,没有连接.请到“控制面板 ...

  3. werkeug的WSGI服务器解析

    werkeug的WSGI服务器解析 1.      WSGI 1.1.    wsgi与flask flask默认的wsgi引用自wekurg 声明app:FLASK对象 app.run() run_ ...

  4. idea 启动java项目报错 java: 程序包javax.servlet.http不存在

    File -- Project Structure

  5. Euler Sums系列(二)

    \[\Large\sum_{n=0}^\infty \frac{H_{2n+1}}{(2n+1)^2}=\frac{21}{16}\zeta(3)\] \(\Large\mathbf{Proof:}\ ...

  6. Cisco无线mDNS

    1.mDNS介绍 两个协议:mDNS和Bonjour mDNS: mDNS(Multicast DNS):主要实现了在没有传统DNS Server的情况下使用LAN内的主机实现相互发现和通信. 使用U ...

  7. js屏幕上下滚动条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. MySQL高可用之MHA配置

    本文简单介绍了MySQL的高可用实现方式之一的MHA MHA:Master High Availability,对主节点进行监控,可实现自动故障转移至其它从节点:通过提升某一从节点为新的主节点,基于主 ...

  9. Tomcat线程池及性能优化(重点)

    只需安装Tomcat [root@localhost ~]# vim /usr/local/tomcat8/conf/server.xml 修改处如下: <Connector port=&quo ...

  10. python实现队列(queue)

    队列队列是一种先进先出的数据结构,主要操作包括入队,出队.入队的元素加入到对尾,从队头取出出队的元素.这里用列表简单模拟队列,其实现如下: queue()is_empty()size()enqueue ...