微信小程序-按照首字母检索城市
发布时间
阅读量：
阅读量
一、前期准备：
访问百度地图以获取开发者身份验证密钥（AK），并前往https://lbsyun.baidu.com/apiconsole/key?application=key
地址：http://lbsyun.baidu.com/apiconsole/key
需要提供小程序的appID
2.去微信公众平台 -》设置——》开发设置-》服务器域名 配置https://api.map.baidu.com
如果以上两步缺少任何一步骤，小程序端会报错：
3.运用小程序组件 citySelect -城市选择器
可以参考https://github.com/chenjinxinlove/citySelect
下载下来放在pages同级目录下面：
二、效果图：
三、代码
1)小程序端授权获取定位信息：
wx.getSetting({
success: (res) => {
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发起授权请求
wx.openSetting({
success: function (res) {
if (res.authSetting["scope.userLocation"] == true) {
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 1000
})
//再次授权，调用wx.getLocation的API
that.getLocationApi();
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
}
}
})
}
}
})
} else if (res.authSetting['scope.userLocation'] == undefined) {
//用户首次进入页面,调用wx.getLocation的API
that.getLocationApi();
}
else {
console.log('授权成功')
//调用wx.getLocation的API
that.getLocationApi();
}
}
}) getLocationApi: function () {
let that = this;
wx.getLocation({
type: 'wgs84',
success: function (res) {
let latitude = res.latitude
let longitude = res.longitude
let speed = res.speed
let accuracy = res.accuracy
wx.request({
url: 'https://api.map.baidu.com/geocoder/v2/?ak='你自己的ak'&location=' + latitude + ',' + longitude + '&output=json',
data: {},
header: { 'Content-Type': 'application/json' },
success: function (ops) {
console.log('定位城市：', ops.data.result.addressComponent.city)
//需要缓存就操作缓存
wx.setStorageSync("location", ops.data.result.addressComponent.city)
},
fail: function (resq) {
wx.showModal({
title: '提示信息',
content:'获取定位失败',
showCancel: false,
confirmColor: '#f37938'
});
},
complete: function () {
}
})
}
})
},定位的下拉按钮，点击跳转到城市选择的页面：
selectArea:function(){
wx.navigateTo({
url: '../selectArea/selectArea',
})
},2）selectArea.wxml
<view class='wrapper'>
<view class="loaction-city-title">定位城市</view>
<view class="location-city-name">
<view class="list-name" bindtap='selectLocation'>{{currentLocation}}</view>
</view>
<list-html data="{{city}}" binddetail="bindtap" search="{{value}}"></list-html>
</view>主要的就是selectArea.json中注意引用：
{
"usingComponents": {
"list-html": "/component/wx-index-list/wx-index-list"
}
}然后就是选择某个城市，拿到城市的值：
bindtap:function(e) {
let selectArea = e.detail.name
wx.setStorageSync('selectArea', selectArea)
wx.switchTab({
url: '../index/index',
})
},暂时就这些，后面遇到坑在更新咯。
全部评论 (0)
还没有任何评论哟~