小程序 获取当前用户城市信息(省市区)

步骤

  1. 使用 wx.getLocation来获取位置授权:获取到设备当前的地理位置信息,这个信息是当前位置的经纬度
  2. 使用其他第三方地图服务的API:获取当前位置是处于哪个国家,哪个城市等信息(eg:腾讯地图、百度地图)。
  3. 以腾讯地图为例 去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key)。
  4. 在我们的代码中调用这个API。该API可以通过JSONP的方式调用,也可以在服务器端发起调用。
    具体步骤知识参考:https://lbs.qq.com/guides/startup.html

代码


(1)获取地理经纬度wx.getLocation
(2)下载微信小程序JavaScriptSDK
(3)安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com
(4)小程序代码完整示例

注意:微信小程序使用的时候,WebServiceAPI 域名白名单不能配置,否则会报错
<text>经纬度:{{latitude}},{{longitude}}</text>
<view><text>位置:</text><text>{{province}} </text><text>{{city}} </text><text>{{district}} </text>
</view>
<button bindtap="getLocation">获取当前城市位置</button>var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({data: {province: '',city: '',district: '',latitude: '',longitude: '',},onLoad: function (options) {qqmapsdk = new QQMapWX({key: 'YRXBZ-42R3W-6XVRG-R3V7B-CAOE7-TQB43'});},getLocation () {let _this = thiswx.getSetting({success: (res) => {console.log(JSON.stringify(res))// res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面// res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权// res.authSetting['scope.userLocation'] == true    表示 地理位置授权if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {wx.showModal({title: '请求授权当前位置',content: '需要获取您的地理位置,请确认授权',success: function (res) {if (res.cancel) {wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})//再次授权,调用wx.getLocation的API_this.getToLocation()} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//调用wx.getLocation的API_this.getToLocation()}else {//调用wx.getLocation的API_this.getToLocation()}}})},// 微信获得经纬度getToLocation: function () {let _this = this;wx.getLocation({type: 'wgs84',success: function (res) {console.log(JSON.stringify(res))var latitude = res.latitudevar longitude = res.longitudevar speed = res.speedvar accuracy = res.accuracy;_this.setData({latitude: res.latitude,longitude: res.longitude})_this.getLocal(latitude, longitude)},fail: function (res) {console.log('fail' + JSON.stringify(res))}})},// 获取当前地理位置getLocal: function (latitude, longitude) {let vm = this;qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {console.log(JSON.stringify(res));console.log(res.result);let province = res.result.ad_info.provincelet city = res.result.ad_info.citylet district = res.result.ad_info.districtvm.setData({province: province,city: city,district: district,latitude: latitude,longitude: longitude})},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});}
})

结果

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401514.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序 获取当前用户地址及地图显示

步骤使用 wx.getLocation来获取当前位置&#xff1a; 注意;当用户取消位置获取授权之后,再次点击获取位子按钮小程序不会再提醒用户是否授权,这个时候最好自己弹出提示框让用户去设置页面开启授权设置. wx.getLocation({type: wgs84, //wgs返回 gps坐标&#xff0c; gcj02返回…

CSS3 box-shadow 属性

2019独角兽企业重金招聘Python工程师标准>>> 实例 向 div 元素添加 box-shadow&#xff1a; div { box-shadow: 10px 10px 5px #888888; } 亲自试一试 <!DOCTYPE html> <html> <head> <style> div { width:300px; height:100px; backgroun…

[译]Kinect for Windows SDK开发入门(二):基础知识 上

上篇文章介绍了Kinect开发的环境配置&#xff0c;这篇文章和下一篇文章将介绍Kinect开发的基本知识&#xff0c;为深入研究Kinect for Windows SDK做好基础。 每一个Kinect应用都有一些基本元素。应用程序必须探测和发现链接到设备上的Kinect传感器。在使用这些传感器之前&…

小程序 开发经验

项目目录理解components自定义组件库config一个公用的数据配置images本地、上传的图片放置pagespages目录存储小程序的每个页面&#xff0c;每个页面包含四个文档.json为配置文件.wxml 为模板文件&#xff0c;相当于HTML模板.wxss 为样式文件&#xff0c;相当于HTML的CSS样式表…

EasyUI,二级页面内容的操作

2019独角兽企业重金招聘Python工程师标准>>> 父页面获取子页面的数据 1.若仅仅是勾选&#xff0c;则将勾选的放到map中(key&#xff0c;value)&#xff0c;key是能验证数据唯一的字段&#xff0c;value就是勾选行的rowData&#xff1b; 再将map转换成json格式的字…

Javascript 对象二(Number、String、Boolean、Array、Date、Math、RegExp)

Javascript 对象二&#xff08;Number、String、Boolean、Array、Date、Math、RegExp&#xff09;Number 数字 对象String 字符串 对象Boolean 布尔 对象Array 数组 对象Date 日期 对象Math 算数 对象RegExp 正则表达式 对象Number 数字 对象 JavaScript中 数字不分为整数类型…

GItHub--Makedown语法学习(快速入门)

段落支持两种标题的语法&#xff1a;Setext 和 atx 形式Setext形式&#xff1a;利用 &#xff08;最高阶标题&#xff09;和 - &#xff08;第二阶标题&#xff09; 标题1标题2 ---Atx 形式&#xff1a;在行首插入 # 即可。可以增加一级标题、二级标题、三级标题、四级标题、…

转:ASP.NET MVC4细嚼慢咽---(5)js css文件合并

原文&#xff1a;http://blog.csdn.net/zx13525079024/article/details/19161777 MVC4增加了一些新功能&#xff0c;接下来&#xff0c;我们来研究下MVC4中的新增功能&#xff0c;我们在新建一个MVC4项目的时候&#xff0c;会发现在项目下多出了一个App_Start文件夹&#xff0c…

[读码时间] 完美拖拽

说明&#xff1a;代码取自网络&#xff0c;注释为原文所有&#xff01; <!DOCTYPE html> <html> <head><meta charset"utf-8" /><title>完美拖拽</title><style type"text/css">html, body {overflow: hidden;}…

Oracle 随机取某一列的值

2019独角兽企业重金招聘Python工程师标准>>> select t.recd_idfrom (select recd_id, ROWNUM RN from RT_TICKETS_BIS_RECD) twhere t.RN (select round(DBMS_RANDOM.VALUE(1, count(1)))from RT_TICKETS_BIS_RECD); 1) select round(DBMS_RANDOM.VALUE(1, count(1…

ZooKeeper典型应用场

为什么80%的码农都做不了架构师&#xff1f;>>> 数据发布与订阅&#xff08;配置中心&#xff09; 发布与订阅模型&#xff0c;即所谓的配置中心&#xff0c;顾名思义就是发布者将数据发布到ZK节点上&#xff0c;供订阅者动态获取数据&#xff0c;实现配置信息的集…

Mysql jdbc driver源码浅析(一)

jdbc操作实例代码 //1. 加载驱动Class.forName("com.mysql.jdbc.Driver");//2. 获取连接Connection connection DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/dbName", "userName", "password");Statement stmt conne…

用rem来做响应式开发

电脑版的商城昨晚做完了&#xff0c;今天赶着做手机端的&#xff0c;提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度&#xff0c;保证在不同手机上都能正常显示给用户&#xff0c;我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽…

Java 编程下 Eclipse 如何设置单行代码显示的最大宽度

Eclipse 下一行代码的默认宽度是 80 &#xff0c; 稍长一点的一行代码就会自动换行&#xff0c;代码可读性较差&#xff0c;我们可以自己在 Eclipse 对代码宽度进行设置。 设置路径为&#xff1a;【Window】→【Preferences】→【Java】→【Code Style】→【Formatter】&#x…

基于VMWare配置VxWorks开发环境

常规VxWorks的开发环境都是基于目标开发板或目标机来构建的&#xff0c;但并非所有人都具备这样的条件&#xff0c;所以本文主要介绍如何基于vmware来构建VxWorks开发环境。Step 1. 安装vmware 首先需要安装vmware, 版本没有什么限制&#xff0c;我装的是vmware 8.0&#xff0c…

keepalived实现高可用nginx反向代理的简单案例

写在前面&#xff1a;如果此文有幸被某位朋友看见并发现有错的地方&#xff0c;希望批评指正。如有不明白的地方&#xff0c;愿可一起探讨。案例拓扑图安装keepalived和nginx安装keepalived# yum -y install keepalived创建nginx用户组及nginx用户# groupadd -r nginx # userad…

gulp+PC前端静态页面项目开发

前言&#xff1a; 现在单页面很流行&#xff0c;但是在 PC 端多页面还是常态&#xff0c;所以构建静态页面的工具还有用武之地 gulp构建前言&#xff1a; 如今我们开发web网页的方式主要有几种&#xff0c;使用vue-cli、create-react-app、webpack、不借助构建工具等实现单页…

vue开发问题积累

mounted钩子中使用$refs出现undefined 原因&#xff1a;如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for&#xff08;即根据获得的后台数据来动态操作DOM&#xff0c;即响应式&#xff09;&#xff0c;那么这些DOM是不会再mounted阶段找到的。 **解决方法&#xff1…

动态规划0—1背包问题

动态规划0-1背包问题 问题描写叙述&#xff1a;给定n种物品和一背包。物品i的重量是wi&#xff0c;其价值为vi&#xff0c;背包的容量为C。问应怎样选择装入背包的物品&#xff0c;使得装入背包中物品的总价值最大?对于一种物品&#xff0c;要么装入背包&#xff0c;要么不装。…

vmstat命令详解

参数详情&#xff1a; r runingb blockswpd 虚拟内存使用时间free 物理free内存buff 从硬盘--->内存的 缓冲cache 从内存--->硬盘的 缓存si 从磁盘写入swap的大小/sso 从swap写入磁盘的大小/sbi 块设备每秒接收的块数量bo 块设备每秒发送的块数量cs 每秒上下文切换次数us…