地址选择解决方案 [即抄即用,拎包入住]
操作:ctrl c + ctrl v
资源:所需的JS和图片资源在云盘 (提取码:o4mk)里,直接粘贴在demo2文件夹就可以了
思路:选择自己附近的地址或搜索想要的地址
欢迎热烈交流啊哈哈哈23333,经常在线的
ps. 记得申请个腾讯地图qqmap key啊
os. 代码有点小多,ctrl c + ctrl v要勤快点
demo
<view bindtap=“jump”>
<view wx:if=’{{!address}}’>请选择地址(必选)</view>
<view wx:else>{{address}}</view>
</view>
<view bindtap=“jump”>
<view wx:if=’{{!address}}’>请选择地址(必选)</view>
<view wx:else>{{address}}</view>
</view>
jump(){ wx.navigateTo({ url: ‘/pages/demo2/demo2’, }) }
demo2
<view class="searchCtr">
<view class="searchIcon">
<icon type='search' />
</view>
<input bindinput="getAdr" placeholder='请输入地址'
placeholder-class="searchPH" class="search" />
</view>
<map class="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" hidden='{{keyword}}' />
<view class="adrTxtBox" style="margin-top:{{keyword?100:650}}rpx">
<view wx:for="{{adrList}}" wx:key="index">
<view bindtap="adrConfirm" data-index="{{index}}" class="adrBox">
<view class="imgNtitle">
<image src="minilandmark.png" class="minilandmark" />
<view class="title">{{item.title}}</view>
</view>
<view class="adrDetail">{{item.address}}</view>
</view>
</view>
</view>
------------------------------------------------------------------------------------------
var QQMapWX = require('/qqmap-wx-jssdk.js')
var qqmapsdk;
Page({
onLoad() {
var that = this
qqmapsdk = new QQMapWX({
key: '你自己的qqMap key'
})
wx.getLocation({
type: 'gcj02',
success(res) {
const lat = res.latitude
const lon = res.longitude
const markers = [{
latitude: lat,
longitude: lon,
iconPath: 'landmark.png',
width: 40,
height: 40,
label: {
content: '你现在位置',
bgColor: '#ffffff',
display: 'always',
borderRadius: 3,
borderWidth: 1,
anchorY:-30,
anchorX:15
}
}]
qqmapsdk.reverseGeocoder({
location: {
latitude: lat,
longitude: lon
},
get_poi: 1,
success(res) {
var poiList = res.result.pois
var adrList = []
for (var i in poiList) {
adrList.push({
title: poiList[i].title,
address: poiList[i].address,
latitude: poiList[i].location.lat,
longitude: poiList[i].location.lng
})
}
that.setData({
latitude: lat,
longitude: lon,
markers: markers,
adrList: adrList
})
}
})
}
})
},
getAdr(e) {
var that = this;
var keyword = e.detail.value
this.setData({
keyword: keyword
})
qqmapsdk.getSuggestion({
keyword: e.detail.value,
success: function (res) {
var poiList = res.data
var adrList = [];
for (var i = 0; i < res.data.length; i++) {
adrList.push({
title: poiList[i].title,
address: poiList[i].address,
latitude: poiList[i].location.lat,
longitude: poiList[i].location.lng
});
}
that.setData({
adrList: adrList
});
}
});
},
adrConfirm(e) {
let pages = getCurrentPages()
let prePage = pages[pages.length - 2]
let index = e.currentTarget.dataset.index
let adrList = this.data.adrList
let address = adrList[index].title
let latitude = adrList[index].latitude
let longitude = adrList[index].longitude
prePage.setData({
address: address,
latitude: latitude,
longitude: longitude
})
wx.navigateBack({
delta: 1
})
}
})
------------------------------------------------------------------------------------------------
.searchCtr {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
height: 100rpx;
width: 100%;
background-color: #fec22c;
z-index: 1;
}
.searchIcon {
display: flex;
align-items: center;
justify-content: center;
background-color: white;
width: 10%;
height: 70rpx;
border-radius: 60rpx 0 0 60rpx;
}
.search {
background-color: white;
width: 80%;
height: 70rpx;
border-radius: 0 60rpx 60rpx 0;
}
.searchPH {
font-size: 27rpx;
}
.map {
position: fixed;
top: 100rpx;
height: 550rpx;
width: 100%;
z-index: 1;
}
.adrTxtBox {
width: 100%;
}
.adrBox {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 2.5%;
height: 150rpx;
width: 95%;
border-bottom: 2rpx solid rgba(133, 133, 133, 0.2);
}
.imgNtitle {
display: flex;
flex-direction: row;
align-items: center;
height: 50rpx;
}
.minilandmark {
width: 40rpx;
height: 40rpx;
}
.title {
margin-left: 20rpx;
}
.adrDetail {
margin-top: 20rpx;
margin-left: 60rpx;
font-size: 24rpx;
color: #666;
}