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

引入阿里巴巴适量图标实例：https://www.cnblogs.com/studyh5/p/10039360.html

小程序位置文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.openLocation.html

腾讯位置服务：https://lbs.qq.com/qqmap_wx_jssdk/index.html

wxml  

<view class="title">
    <navigator url="/pages/index/index">
        <text style="margin:0 30rpx;" class="iconfont back"></text>
    </navigator>
    <text>个人中心</text>
</view>
<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>
<view class="avatar-list">
    <view class="avatar-li">
        <text>我的主页</text>
        <text class="iconfont wodezhuye"></text>
    </view>
    <view class="avatar-li">
        <text>我的营销</text>
        <text class="iconfont kapianliebiao"></text>
    </view>
    <view class="avatar-li">
        <text>帮助</text>
        <text class="iconfont help"></text>
    </view>
</view>
<!--登录授权页面-->
<view hidden="{{loginIsShow}}" class="loginwrap">
    <view class="login">
        <view class="loginInfor">
            <text class="infortext1">申请获取以下权限</text>
            <text class="infortext2" style="">获取您得公开信息（地理位置）</text>
        </view>
        <button bindtap="getUserLocation" open-type="getUserLocation" class="loginBtn">允许</button>
    </view>
</view>

js

//logs.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  data: {
      avatar_city:'',//avatar页面用来展示的city 例如：北京市
      avatar_district:'',//avatar页面用来展示的district 例如大兴区
      loginIsShow:true
  },
  onLoad: function () {
      var vm = this;
      wx.getSetting({
          success: function(res){
              /*console.log(res)*/
              if (res.authSetting['scope.userLocation'] == true) {
                  vm.setData({
                      loginIsShow:true
                  });
                  vm.getUserLocation()
              }else{
                  vm.setData({
                      loginIsShow:false
                  });
              }

          }
      })
  },
  getUserLocation:function(){
      var _this = this;
      _this.setData({
          loginIsShow:true
      })
      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";
.fl{float:left;}
.fr{float:right}
.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;}
.avatar-list{padding:30rpx 60rpx;font-size:20rpx;}
.avatar-list .avatar-li{display:flex; justify-content: space-between;height:80rpx;line-height:80rpx;}
/*登录授权页面*/
.loginwrap{width:100%;height:100%;background:rgba(0,0,0,0.5);position:fixed;z-index:99;top:0;}
.loginwrap .login{width:640rpx;height:400rpx;position:absolute;left:50%;top:50%;margin-left:-320rpx;margin-top:-200rpx;background:#fff;border-radius:10rpx;}
.infortext1{width:100%;display:block;text-align:center;font-size:32rpx;color:rgba(192,191,193,1);background:rgba(247,247,247,1);height:130rpx;line-height:130rpx;font-weight:bold;}
.infortext2{width:100%;display:block;text-align:center;font-size:28rpx;height:120rpx;line-height:120rpx;background:#fff;color:rgba(192,191,193,1);}
.loginBtn{background:transparent;color:green;border-color:transparent;}
.loginBtn::after{ border: none;}

iconfont.wxss

@font-face {
    font-family: 'iconfont';  /* project id 987889 */
    src: url('//at.alicdn.com/t/font_987889_ii3hns9f3vl.eot');
    src: url('//at.alicdn.com/t/font_987889_ii3hns9f3vl.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_987889_ii3hns9f3vl.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_987889_ii3hns9f3vl.woff') format('woff'),
    url('//at.alicdn.com/t/font_987889_ii3hns9f3vl.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_987889_ii3hns9f3vl.svg#iconfont') format('svg');
}
.iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-avatar:before{content:"\e60b";font-size:50rpx;}
.tianxie:before{content:"\e652";}
.kapianliebiao:before{content:"\e626";}
.help:before{content:"\e61b";}
.wodezhuye:before{content:"\e608";}
.back:before{content:"\e624"}