腾讯位置服务---微信小程序JavaScript SDK

wxml  

<view style="display:flex;margin-top:70rpx;">
    <view class="userinfo-avatar">
        <open-data type="userAvatarUrl"></open-data>
    </view>
    <view class="avatar-info">
        <view class="career">我是汽车维修技师</view>
        <view class="text">
            <open-data lang="zh_CN" type="userNickName"></open-data>
        </view>
        <view class="geography">我在{{avatar_city}}{{avatar_district}}为您的爱车服务</view>
    </view>
</view>
<view style="border-top:1rpx solid #eee;"></view>

js

//logs.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  data: {
      avatar_city:'',//avatar页面用来展示的city 例如：北京市
      avatar_district:''//avatar页面用来展示的district 例如大兴区
  },
  onLoad: function () {
      var _this = this;
      qqmapsdk = new QQMapWX({
          key: '' //自己的key秘钥 http://lbs.qq.com/console/mykey.html 在这个网址申请
      });
      wx.getLocation({
          type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
          success(res) {
              const latitude = res.latitude
              const longitude = res.longitude
              qqmapsdk.reverseGeocoder({
                  location: {
                      latitude: latitude,
                      longitude: longitude
                  },
                  success: function (res) {
                      console.log(res.result)
                      _this.setData({
                          avatar_city:res.result.ad_info.city,
                          avatar_district:res.result.ad_info.district
                      })

                  }
              })

          }
      })
  }
})

wxss

@import "../../style/iconfont.wxss";
.title{margin-top:100rpx;font-size:24rpx;display:flex;}
.userinfo-avatar {overflow:hidden;display: block;width: 160rpx;height: 160rpx;margin: 20rpx;border-radius: 50%;border: 2px solid #fff;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);}
.avatar-info{font-size:20rpx;color:rgb(163,163,163);margin:20rpx 0 0 60rpx;}
.career{font-size:28rpx;font-weight:bold;color:#000;height:50rpx;line-height:50rpx;}
.text,.geography{height:40rpx;line-height:40rpx;}