评论

地址选择解决方案 [即抄即用,拎包入住]

仿京东地址选择器

操作: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>
------------------------------------------------------
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;
}
最后一次编辑于  2020-05-21  
点赞 2
收藏
评论

2 个评论

  • 何芷怡
    何芷怡
    2020-02-26
    大神我加了你微信麻烦回复
    2020-02-26
    赞同 1
    回复 1
    • 拎包哥
      拎包哥
      2020-02-26
      哪里大神。。好的,稍等一下
      2020-02-26
      回复
  • 猛男陈阔
    猛男陈阔
    2020-05-20

    收藏了

    2020-05-20
    赞同
    回复 1
    • 拎包哥
      拎包哥
      2020-05-20
      么么哒
      2020-05-20
      回复
登录 后发表内容