第一步:需要在百度地图开发者平台创建一个应用: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. MS17_010漏洞攻击Windows7

    攻击主机系统:Kali Linux 2018 目标主机系统:Windows7 x64 1.攻击主机启动Metasploit: msfconsole 2.查找MS17_010漏洞相关的信息: searc ...

  2. 《开课》---创业学习--训练营直播第一课--HHR

    1,分享三点:敬畏心,学习过程,带着目标学习. 2,融资是个非常专业的技术活. 3,一定不要盲目自信,在资本市场,融资永远是个小概率事件. 4,学习过程:每周解锁学习资料,固定的时间来进行作业答疑. ...

  3. vs2017 vs2019配置sqlite3连接引擎(驱动)指南(二)vs2019续集

    在写完上一篇博客后,一觉醒来,又又又又不行了,介绍一个终极大招,如果你的fuck vs又提示无法打开sqlite3.h的问题 环境win10  vs2019 debug x86 实在没心情写文字了,直 ...

  4. netty代理http&https请求

    (1)关键代码 package test; import java.security.cert.CertificateException; import javax.net.ssl.SSLExcept ...

  5. Binary Heap(二叉堆) - 堆排序

    这篇的主题主要是Heapsort(堆排序),下一篇ADT数据结构随笔再谈谈 - 优先队列(堆). 首先,我们先来了解一点与堆相关的东西.堆可以实现优先队列(Priority Queue),看到队列,我 ...

  6. 阿里云oss操作

    参考网址 https://blog.csdn.net/qq_22764659/article/details/87969743

  7. N-tier architecture N层架构 (转)

    下面的内容既有我的理解,也有翻译的内容,翻译的书名为: <<Expert C# 2008 Business Objects >>http://www.douban.com/su ...

  8. leetcode菜鸡斗智斗勇系列(7)--- 用最小的时间访问所有的节点

    1.原题: https://leetcode.com/problems/minimum-time-visiting-all-points/ On a plane there are n points ...

  9. 虚拟机与ubuntu系统的安装与基础操作

    1.虚拟机的下载: 常见的虚拟机软件有:VMware  VirtuaIBOX  Virtual PC  等. 这里主要介绍VMware ,VMware目前已经有很多个版本,可以根据个人情况进行选择.安 ...

  10. let const var 比较说明

    现在先来做两道练习题 for(var i=0;i<10;i++){ var a='a' let b = 'b' } console.log(a) console.log(b) for(var i ...