使用微信小程序wx.chooseLocation获取定位

最新推荐文章于 2024-08-22 16:23:34 发布

哈啰，小米

最新推荐文章于 2024-08-22 16:23:34 发布

阅读量2.9k

点赞数 4

文章标签：小程序

本文链接：https://blog.csdn.net/hcx_hcx/article/details/118356221

版权

首先看一下结果:

我们的需求是新增地址后实现定位，并回显，当时考虑调用腾讯或百度地图的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%;
}

简单粗暴的完成了定位，适合偷懒的小伙伴