微信小程序 - 获取所在位置(省、市、区)
实现步骤
1. 获取当前经纬度
2. 调用腾讯(百度、高德)地图对应的请求地址,一般都会有独一的key, 譬如
腾讯地图调用地址:
https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${keys}
百度地图调用地址:
https://apis.map.baidu.com/ws/geocoder/v2/?location=${latitude},${longitude}&key=${keys}
wxml
<view>{{district}}</view> <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
当前选择:{{region[0]}} - {{region[1]}} - {{region[2]}}
</view>
</picker>
js
let keys = 'SGXBZ-6X3K6-NYLSF-MALZD-QC6PK-BABOS';
let _page, _this; Page({ /**
* 页面的初始数据
*/
data: {
customItem: '全部'
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
_this = this;
wx.getLocation({
success: function(res) {
_this.getDistrict(res.latitude, res.longitude)
},
})
}, getDistrict(latitude, longitude) {
_page = this;
wx.request({
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${keys}`,
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data.result.address_component.district, res.data.result) // 省
let province = res.data.result.address_component.province;
// 市
let city = res.data.result.address_component.city;
// 区
let district = res.data.result.address_component.district; _page.setData({
district: res.data.result.address_component.district,
region: [province,city,district]
})
}
})
}, bindRegionChange (e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
微信小程序 - 获取所在位置(省、市、区)的更多相关文章
- 微信小程序-获取当前位置和城市名
微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...
- 关于微信小程序获取当前位置信息
小程序开发---获取当前位置信息 一.获取用户地理位置信息 1.配置app.json文件 { "pages": ["pages/index/index"], & ...
- 微信小程序获取当前位置
详细参数说明请看小程序api文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.openLocation.html wx.getLoc ...
- 微信小程序-获取当前位置
在 app.json 里面增加 permission 属性配置(小游戏需在game.json中配置): "permission": { "scope.userLocati ...
- 微信小程序-获取当前城市位置及再次授权地理位置
微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...
- 微信小程序-获取经纬度
微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 微信小程序获取地理位置授权
微信小程序获取地理位置授权,首先需要在app.json中添加配置: "permission": { "scope.userLocation": { " ...
- (八)微信小程序---获取定位信息chooseLocation
微信小程序---获取定位信息 chooseLocation wxml <view bindtap="getlocalPath">{{localPath}}</v ...
随机推荐
- phpunit Cannot redeclare class PHPUnit_Runner_Version
- spring---transaction(4)---源代码分析(事务的状态TransactionStatus)
写在前面 TransactionStatus表示一个具体的事务状态(这里应用到了Java的一个多继承,接口允许多继承) TransactionStatus它继承了SavepointManager接口, ...
- 模拟拖拽图片 碰撞检测 DOM 鼠标事件 闭包
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- 华为S5300系列交换机V100R006SPH019升级补丁
S5300_V100R006SPH019.pat 附件: 链接:https://pan.baidu.com/s/1M1S5amGGViUieSp8lJ9psw 密码:sexx
- 淘宝海量数据库之八-攻克随机IO难关 -----阿里正祥的博客
http://blog.sina.com.cn/s/blog_3fc85e260100qwv8.html
- asp.net MVC 3/4 equivalent to a response.filter
am in a need to intercept all of the html that will be sent to the browser and replace some tags tha ...
- authentication not supported Connect to TFS Git from Xamarin Studio (non-hosted, locally installed TFS 2013)
There are several instructions on how to connect to TFS Git from Xamarin Studio if you're using the ...
- OPC and .NET
Note: recent OPC standards, including Unified Architecture (UA) and Express Interface (Xi) were desi ...
- MVC借助Masonry实现图文瀑布流
借助Masonry可轻松实现瀑布流.本篇实现一个简单的图文瀑布流效果,如下: 图文瀑布流显示的2个要素是图片路径和文字内容,对应的Model为: namespace MvcApplication1.M ...
- 算法:四种冒泡排序(Bubble Sort)实现
背景 大学关于排序的算法,好像就学会了冒泡排序,这个算是排序界的 hello,world 了,冒泡排序的定义如下: 重复的遍历数组. /// <summary> /// 重复的遍历数组. ...