首先看一下结果:
我们的需求是新增地址后实现定位,并回显,当时考虑调用腾讯或百度地图的api,但是发现利用微信选择位置API,获得经纬度信息,然后讲拿到的值回显到页面就ok了,更简单便捷,内容如下:
<view class="center-input-box">
<view class="center-input-text">收货地址:</view>
<view class="center-input-input" bindtap="toPosition">
<text class="iconfont icon-weizhi wz"></text>
<input name="houseAddress" id="houseAddress" value="{{houseAddress}}" placeholder="点击选择收货地址" placeholder-style="color:#a4a4a4;" type="text" maxlength="100" disabled></input>
</view>
</view>
toPosition:function(e){
var that = this;
wx.chooseLocation({
success: function (lb) {},
complete: function (lb) {
that.setData({
houseAddress:lb.name
})
},
cancel: function (lb) {
},
fail: function (lb) {
console.log(lb)
}
})
},
.center-input-box {
display: flex;
align-items: center;
padding: 20rpx;
border-bottom: 1px solid #efefef;
}
.center-input-text{
margin-right: 2%;
}
.center-input-input{
width: 70%;
height: auto;
margin-left: 4%;
position: relative;
}
.center-input-input input{
width: 100%;
height: 55rpx;
line-height: 55rpx;
padding-top: 12rpx;
display: inline-block;
}
.wz{
position: absolute;
top:29%;
left: -8%;
}
简单粗暴的完成了定位,适合偷懒的小伙伴