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

步骤

  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,一经查实,立即删除!

相关文章

PYTHON_正则表达式

字符匹配方法 在编写处理字符串的程序或网页时&#xff0c;经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。 通配符&#xff1a;* 元字符&#xff1a;\ ^ $ * . | ? {} [] () ^ 表示匹配字符串的开头。在…

delphi中指针的用法

大家都认为&#xff0c;C语言之所以强大&#xff0c;以及其自由性&#xff0c;很大部分体现在其灵活的指针运用上。因此&#xff0c;说指针是C语言的灵魂&#xff0c;一点都不为过。同时&#xff0c;这种说法也让很多人产生误解&#xff0c;似乎只有C语言的指针才能算指针。Bas…

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

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

任何傅里叶级数展开和卷积可以参考一下页面

Piecewise-defined Functions http://www.sagemath.org/doc/reference/sage/functions/piecewise.html转载于:https://www.cnblogs.com/ustcSL/archive/2012/06/19/2554961.html

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…

小程序 省市区县三级联动选择器(caseCade)

picker组件 <view class"section"><picker mode"region" bindchange"bindRegionChange" value"{{region}}"><view class"picker">省市区选择: {{region[0]}} {{region[1]}} {{region[2]}}</view>&…

Swagger的坑

swagger.pathPatterns如果是譬如/w/.*&#xff0c;那么如果API中以w开头的描述就会在swagger-ui中显示不出来 转载于:https://www.cnblogs.com/roostinghawk/p/6473864.html

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

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

window.open

摘要&#xff1a; 当点击某个按钮或者某个事件发生出发浏览器打开一个新的窗口&#xff0c;这种交互在我们开发的时候经常会见到&#xff0c;一般有两种方法&#xff1a; 通过a标签&#xff0c;<a href"">click</a>&#xff0c;当点击click是就会跳转页面…

小程序 开发经验

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

设置透明色

_currenTable.backgroundColor [[UIColor blackColor] colorWithAlphaComponent:0.55]; 防止字体透明 //中文的地址处理 NSString *URLString [NSURL URLWithString:ktdemodel.img] ? ktdemodel.img : [self strUTF8Encoding:ktdemodel.img]; -(NSString *)strUTF8Encoding:…

EasyUI,二级页面内容的操作

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

动画 自制弹框上滑+渐显效果

<view class"mask {{showShare ? slidefadeUp : slidefadeDown}}" wx:if"{{showShare}}" catchtouchmove"false"> </view> /* 上滑渐显效果 */ .slidefadeUp {animation: slidefadeUp 0.5s 1 ease forwards;-webkit-animation: sli…

使用LinearLayout实现ListView,解决ListView和ScrollView滚动冲突

在项目中&#xff0c;我们常常会遇到一个ScrollView里面会嵌套ListView的情况&#xff0c;但往往你会发现&#xff0c;ListView和ScrollView的滚动时间会有冲突问题&#xff0c;造成ListView不能完全显示。虽然网上有给出解决方案&#xff0c;但事实上并不好用&#xff0c;并不…

【整理】fiddler不能监听 localhost和 127.0.0.1的问题

localhost/127.0.0.1的请求不会通过任何代理发送,fiddler也就无法截获。 解决方案 1&#xff0c;用 http://localhost. (locahost紧跟一个点号)2&#xff0c;用 http://127.0.0.1. (127.0.0.1紧跟一个点号)3&#xff0c;用 http://machinename (机器名) 4&#xff0c;将localho…

IRasterStatistics Interface

今天用自己写的程序模块生成只包含一个波段的RasterDataset&#xff0c;用ArcGIS打开正常&#xff0c;用自己的程序打开灰度显示是错误的。比如这个波段的灰度范围本来是0~100&#xff0c;程序的TOCControl里却显示的是0~255。用ArcGIS打开一次以后&#xff0c;再用自己的程序打…

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中 数字不分为整数类型…

javascript通用验证

//alert(test); //Validator {Require : /./,Email : /^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$/,Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,Url : /^http:\/\/[A-Za-z0-…

Android系统--Binder系统具体框架分析(一)补充

Android系统--Binder系统具体框架分析&#xff08;一&#xff09;补充 补充&#xff1a;对Binder驱动分析一的代码补充&#xff0c;添加saygoobye和saygoodbye_to服务 test_server.h #ifndef _TEST_SERVER_H#define _TEST_SERVER_H#define HELLO_SVR_CMD_SAYHELLO 0#define HEL…

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

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