微信小程序中使用地图定位

去微信平台注册换取key值就不写了

js

var app = getApp()
var util = require('../../../utils/util.js')
const QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
const wxMap = new QQMapWX({
  key: 'FT7BZ-F6EKW-433RO-REVT5-DAEAZ-DIB7Q' // 必填
});
Page({

  data: {
    address:'',   //详细地址
    result:'',     //全部地址信息
    oid:'',       //客户id
  },
  onLoad(options) {
   this.setData({         //获取上层客户id
      oid:options.id
    })
    //获取定位
    this.getLocationSetting()    

  
  },

  //定位、显示地图、经纬度转地址

  /** 获取定位权限*/
  getLocationSetting() {
    let _this = this
    wx.getSetting({
      success: (res) => {
        // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
        // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
        // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
        if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
          _this.openTipFun()
        } else if (res.authSetting['scope.userLocation'] == undefined) {
          //调用wx.getLocation的API
          _this.getLocationInfo()
        }
        else {
          //调用wx.getLocation的API
          _this.getLocationInfo()
        }
      },
      fail:(res)=>{
        app.tishi('失败')
        console.log(res)
      }
    })
  },

  /**获取位置经纬度*/
  getLocationInfo() {
    let _this = this;
    wx.getLocation({
      type: 'gcj02',
      success: res => {
        this.setData({
          location: res,
        })
        //用经纬度获取详细地址
        _this.reverseGeocoder(res.latitude, res.longitude)
      },
      fail:(res)=>{
        wx.showModal({
          content:"请先打开手机的GPS定位，然后重新进入页面！",
          showCancel:false,
          success (res){
            wx.navigateBack({
              delta: 1,
            })
          }
        })
      }
    })
  },
  /**经纬度逆解析 */
  reverseGeocoder(lat, lng) {
    var _this = this
    wxMap.reverseGeocoder({
      location: {
        latitude: lat,
        longitude: lng
      },
      success: function (res) {
        console.log(res);
        _this.setData({
          address: res.result.address,
          result:res.result.ad_info
        })
        console.log(_this.data.result);
      },
      fail: function (err) {
        console.log(err, 'err')
      }
    });
  },

  /** 获取定位权限提示*/
  openTipFun(){
    let _this = this;
    wx.showModal({
      title: '请求授权当前位置',
      content: '需要获取您的地理位置，请确认授权',
      showCancel:false,
      success: function (res) {
          wx.openSetting({
            success: function (dataAu) {
              if (dataAu.authSetting["scope.userLocation"] == true) {
                wx.showToast({
                  title: '授权成功',
                  icon: 'success',
                  duration: 1000
                })
                //再次授权，调用wx.getLocation的API
                _this.getLocationInfo()
              } else {
                _this.openTipFun()
              }
            }
          })
      }
    })
  },


 
})

html

<view class="addBuild">
    <view class="inputDiv">
      <view class="inputLeft">项目定位打卡</view>
    </view>
    <view class="subtips"><text style="color:#FE0202">* </text> 此定位为区总陪访直接关联里程碑，请务必再项目地</view>
    <view class="mapbox">
      <map latitude="{{location.latitude}}" longitude="{{location.longitude}}" show-location></map>
      <view class="fs28 fw-b mg-t-24">当前位置：</view>
      <view style="margin-top:12rpx">
        {{address}}
      </view>
    </view>
</view>

css

page{
  background:rgba(249,250,251,1);
}
.addBuild{
  padding: 24rpx;
  width: 100%;
  border-radius:80rpx 0rpx 0rpx 0rpx;
  background:rgba(249,250,251,1);
  box-sizing: border-box;
}
.inputDiv{
  overflow: hidden;
  width: 100%;
}
.inputDiv .inputLeft{
  color:#1E2020;
  font-size: 30rpx;
  /* font-weight: bold; */
  margin-right: 16rpx; 
  line-height: 56rpx;
}

  /* 定位 */
  .mapbox{
    background: #fff;
    border-radius: 28rpx;
    padding: 24rpx;
    margin-bottom: 32rpx;
    color: rgba(19,28,44,0.6);
    font-size: 28rpx;
    line-height: 1.2;
  }
  .mapbox map{
    width: 100%;
    height: 482rpx;
    border-radius: 20rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
  }

  .submitBut{
    width: 702rpx;
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    background: linear-gradient(90deg, #4771EA 0%, #4C34D2 36%, #991FB3 65%, #D251EE 100%);
    border-radius:48rpx;
    font-size: 32rpx;
    font-weight: 500;
    color:rgba(255,255,255);
    position: fixed;
    bottom: 30rpx;
    left: 24rpx;
  }

  .subtips{
    font-size: 22rpx;
    color: #CBD4DD;
    margin-bottom: 10rpx;
  }