一、获取微信地址

在小程序的开发中，内置了获取微信地址的API接口。我们可以直接调用，对返回的数据进行相关的处理即可。代码如下：

    <view class="wx_address flex_c_m" bindtap='weChat'><text class="iconfont iconweixin1"></text><text class="we_address">获取微信收货地址</text></view>

  // 获取微信地址weChat() {let that = this;wx.getSetting({success(res) {console.log("vres.authSetting['scope.address']：", res.authSetting['scope.address'])if (res.authSetting['scope.address']) {wx.chooseAddress({success(res) {console.log(res.userName)console.log(res.postalCode)console.log(res.provinceName)console.log(res.provinceName)console.log(res.countyName)console.log(res.detailInfo)console.log(res.nationalCode)console.log(res.telNumber)let obj = {TakeMan: res.userName,TakeTel: res.telNumber,TakeProvince: res.provinceName,TakeCity: res.cityName,TakeArea: res.countyName,TakeAddress: res.detailInfo,TakeBuildingNo: "",IsDefault: false,CommunityName: "",CommunityAddress: "",TakeLongitude: "",TakeLatitude: ""}http.requestLoading('api/services/app/ShopMemerShippingAddressService/AddMemerShippingAddress', obj, '', 'POST').then(res => {console.log(res)if (res.data.Result.Code == 0) {wx.showToast({title: '获取微信地址成功',icon: 'none'})that.getAddressList();}})}})// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问} else {if (res.authSetting['scope.address'] == false) {wx.openSetting({success(res) {console.log(res.authSetting)}})} else {wx.chooseAddress({success(res) {console.log(res.userName)console.log(res.postalCode)console.log(res.provinceName)console.log(res.cityName)console.log(res.countyName)console.log(res.detailInfo)console.log(res.nationalCode)console.log(res.telNumber)// that.setData({//   userName: res.userName,//   provinceName: res.provinceName,//   cityName: res.cityName, //第二级地址//   countyName: res.countyName, //第三级地址//   detailInfo: res.detailInfo, //详细收货地址信息//   telNumber: res.telNumber //收货人手机号码// })}})}}}})}

效果图如下：

二、联动搜索及模糊查询

在项目中实现选择省市区，根据选择的内容进行更详细的地址。详细地址可以通过搜索查到，具体代码如下：

    <view class="address_top"><view class="wx_address flex_c_m" bindtap='weChat'><text class="iconfont iconweixin1"></text><text class="we_address">获取微信收货地址</text></view><view class="personal"><view class="personal_list"><view class="personal_data"><text class="personal_data_type">收货人</text><input class="zc_input" bindinput="inputValue" value="{{userName}}" placeholder="请填写收货人姓名"></input></view></view><view class="personal_list"><view class="personal_data"><text class="personal_data_type">手机号码</text><input class="zc_input" bindinput="telNumber" value="{{telNumber}}" placeholder="请填写联系方式"></input></view></view><view class="personal_list"><picker mode="region" bindchange="bindRegionChange" value="{{region}}"><view class="personal_data"><text class="personal_data_type">所在地址</text><view class="picker"><text class="address">{{region.length ? (region[0]+'-'+region[1]+'-'+region[2]) : ''}}</text><text class="iconfont iconxiangshang-copy toushustore_right"></text></view></view></picker></view><view class="personal_list"><view class="personal_data" bindtap='onChangeAddress'><text class="personal_data_type">详细地址</text><input class="zc_input_txt" placeholder="请输入所在小区/大厦/学校 等" value="{{chooseAddress}}"></input><text class="iconfont iconxiangshang-copy toushustore_right"></text></view></view><view class="personal_list"><view class="personal_data"><text class="personal_data_type">楼牌号</text><input class="zc_input_txt" value="{{IDNo}}" maxlength="18" placeholder="请输入楼号/门牌号" bindinput="idNo"></input></view></view></view></view><view style="height:30rpx;"></view><view class="switch flex_lr_m"><view>设为默认地址</view><view><switch checked="{{switch1Checked}}" bindchange="switch1Change" color="#FEB1C6" /></view></view><!-- 保存收货地址 --><view class="add_address flex_c_m" bindtap="Preservation"><text class="add_txt">保存</text></view>

这里需要说明一下，需要引入腾讯地图的SDK。借助SDK实现将省市区转为经纬度，从而实现联动的效果。模糊查询是借助内置的API实现的。

// pages/shoppingMall/Addaddress/Addaddress.js
const http = require('../../../server/request.js');
const QQMapWX = require('../../../utils/qqmap-wx-jssdk.min.js');
const app = require('../../../utils/uselogn.js'); //获取应用实例
// 引入SDK核心类
// 实例化API核心类
let qqMap = new QQMapWX({key: 'PIQBZ-VC6L5-6MRIU-QXQJE-BOVHK' // 必填
});
Page({/*** 页面的初始数据*/data: {userName: '', //收货人姓名provinceName: '', //国标收货地址第一级地址cityName: '', //国标收货地址第二级地址countyName: '', //国标收货地址第三级地址detailInfo: '', //详细收货地址信息telNumber: '', //收货人手机号码region: [],switch1Checked: false,chooseAddress: '',IDNo: '',lng: '',lat: '',isshop: true, //判断来源i:''},onLogin: app.userLogin,/*** 生命周期函数--监听页面加载*/onLoad: function(options) {console.log(options)if (Object.keys(options).length == 0) {console.log("空对象")} else {console.log("非空对象")this.setData({isshop: false,i: options.index})}},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {this.onLogin(this.authCallback);},authCallback: function() {},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {},// 获取微信地址weChat() {let that = this;wx.getSetting({success(res) {console.log("vres.authSetting['scope.address']：", res.authSetting['scope.address'])if (res.authSetting['scope.address']) {wx.chooseAddress({success(res) {console.log(res.userName)console.log(res.postalCode)console.log(res.provinceName)console.log(res.provinceName)console.log(res.countyName)console.log(res.detailInfo)console.log(res.nationalCode)console.log(res.telNumber)let region = [];region.push(res.provinceName, res.countyName, res.countyName)that.setData({userName: res.userName,telNumber: res.telNumber, //收货人手机号码region: region,chooseAddress: res.detailInfo})}})// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问} else {if (res.authSetting['scope.address'] == false) {wx.openSetting({success(res) {console.log(res.authSetting)}})} else {wx.chooseAddress({success(res) {console.log(res.userName)console.log(res.postalCode)console.log(res.provinceName)console.log(res.cityName)console.log(res.countyName)console.log(res.detailInfo)console.log(res.nationalCode)console.log(res.telNumber)}})}}}})},//地区选择bindRegionChange: function(e) {console.log('picker发送选择改变，携带值为', e)this.setData({region: e.detail.value})console.log(e.detail.value[0] + e.detail.value[1] + e.detail.value[2])qqMap.geocoder({address: e.detail.value[0] + e.detail.value[1] + e.detail.value[2],complete: (res => {console.log(res.result.location); //经纬度对象this.setData({lng: res.result.location.lng,lat: res.result.location.lat})})})},// 是否默认switch1Change(e) {console.log(e)this.setData({switch1Checked: e.detail.value})},// 保存收货地址Preservation() {let parm = {TakeMan: this.data.userName,TakeTel: this.data.telNumber,TakeProvince: this.data.region[0],TakeCity: this.data.region[1],TakeArea: this.data.region[2],TakeAddress: this.data.chooseAddress,TakeBuildingNo: this.data.IDNo,IsDefault: this.data.switch1Checked,CommunityName: "",CommunityAddress: "",TakeLongitude: "",TakeLatitude: ""}console.log(parm)http.requestLoading('api/services/app/ShopMemerShippingAddressService/AddMemerShippingAddress?__shop__=4aa5b012-65aa-4f1c-be1f-c7c5852dee7b', parm, '', 'POST').then(res => {console.log(res)if (res.data.Result.Code == 0) {wx.showToast({title: '地址保存成功',icon: 'none'})if (this.data.i == 1) {wx.setStorageSync('addreass', parm)wx.navigateBack({delta: 2})} else if (this.data.i == 2) {wx.setStorageSync('addreass1', parm)wx.navigateBack({delta: 2})} else {setTimeout(() => {wx.navigateTo({url: '/pages/shoppingMall/shippingAddress/shippingAddress',})}, 500)}}})},//移动选点onChangeAddress: function() {var _page = this;wx.chooseLocation({latitude: _page.data.lat,longitude: _page.data.lng,success: function(res) {_page.setData({chooseAddress: res.name});},fail: function(err) {console.log(err)}});},// 楼牌号idNo(e) {console.log(e.detail.value)this.setData({IDNo: e.detail.value})},// 收货人inputValue(e) {this.setData({userName: e.detail.value})},// 手机号telNumber(e) {this.setData({telNumber: e.detail.value})}
})

效果图如下所示：

三、导航

导航可以利用小程序自带的API去实现，通过传递不同的参数来控制目的地不同。代码如下：

    <view class="receiv flex_lr_m" bindtap="click"><text class="receiv_name">提货地点</text><view class="dib receiv_address">{{shoplists.StoreAddress}}</view><text class="iconfont icondizhi1"></text></view>

  // 导航click() {console.log(1)let that = this;let lat = that.data.shoplists.Latitude;let long = that.data.shoplists.Longitude;wx.getLocation({ //获取当前经纬度type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  success: function(res) {var latitude = res.latitudevar longitude = res.longitudeconsole.log(typeof latitude, longitude, res, typeof lat, parseFloat(long))wx.openLocation({ //使用微信内置地图查看位置。latitude: latitude, //要去的纬度-地址longitude: longitude, //要去的经度-地址name: that.data.shoplists.StoreAddress,address: that.data.shoplists.StoreAddress})}})}

效果图如下：

关于小程序中地图的应用（联动搜索，模糊查询，定位导航）相关推荐

记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
微信小程序中使用emoji表情相关说明
本帖将聚合一些跟emoji表情有关的知识:前端传过来的昵称和备注信息一定要经过严格的正则表达式过滤,放置出现XSS等攻击,另外emoji字体表情库应该使用base64_encode编码,拿信息的时候b ...
php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
微信小程序：高德地图在小程序中的实践（含静态地图）
前言前人栽树,后人乘凉.记录下工作的点点滴滴,让同道中人少走弯路~ 来看看需求和问题:房产相关的项目,详情中需要显示房源地址,底部要有固定的菜单(不是tabbar),房源数据过多,数据超过一屏时,m ...
在小程序中显示地图并添加标注的教程
前言需求: 在小程序里显示地图,并标记地图上的一个坐标点. 管理员可以在后台设置坐标点小程序显示地图和坐标点 .wxml文件 <view style="display:flex; ...
小程序获取城市行政区号_小程序中通过经纬度如何获取所在省市区名字（腾讯地图JavaScript SDK）...
在小程序中通过经纬度来获取所在省市区名字,这个功能还是挺有意思的,小程序中竟然不直接返回所在省市区,只提供经纬度,还需要腾讯地图来获取,还是有点小坑的,不注意的话很容易出问题.废话不多说,请看下文. ...
如何在微信小程序中调用腾讯地图api
微信小程序的地图api是非常有限的,如果要搜索地图上的位置,比如附近的医院.学校等,就需要使用地图api,使用腾讯地图api的过程如下: 一.开发者申请腾讯地图进入官网http://lbs.qq.c ...
在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...

关于小程序中地图的应用（联动搜索，模糊查询，定位导航）

小程序中地图的应用

一、获取微信地址

二、联动搜索及模糊查询

三、导航

关于小程序中地图的应用（联动搜索，模糊查询，定位导航）相关推荐

最新文章

热门文章