微信小程序 获取位置信息

微信小程序点击获取位置信息

效果图：

点击工程位置即可打开地图

小程序前端代码

<view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10' bindtap='getLocation'>
   <label class='fl m_t5'>工程位置</label>
   <text class='fr m_t5'>﹀</text>
   <input class='tr fr' type='text' disabled='disabled' value='{{userlocation}}'></input>
   <view class='cl'></view>
</view>

js代码

 

//选择所在区域
  getLocation: function (e) {
    var that = this;
    wx.showLoading({
      title: '加载中',
    })
    wx.chooseLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        console.log("test:" + res)
        wx.hideLoading();
        var latitude = res.latitude
        var longitude = res.longitude
        console.log(res)
        that.setData({
          userlocation: res.name,   //位置
          latitude: latitude,
          longitude: longitude,
        })
      },
      fail: function (res) {
        console.log('拒绝');
        wx.getSetting({
          success: function (ress) {
            console.log(ress)
            if (ress.authSetting['scope.userLocation'] == false) {
              wx.showModal({
                title: '提示',
                content: '您已拒绝授权地理位置信息，是否前去打开？',
                success(res) {
                  if (res.confirm) {
                    wx.openSetting(); //调起小程序设置界面s
                  }
                }
              })
            }else{
              console.log("已授权位置，取消选择位置")
            }
          }
        })
        
      },
      complete: function () {
        wx.hideLoading();
      }
    })
  },

WXSS

.inputs{
  width: 100%;
  border-radius: 10rpx;
}
.inputs input{
  /* width: 68%; */
  text-align: right!important;
  display: inline-block;
  padding-right: 15rpx;
}