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

ゝ一纸荒年。 2022-01-12 11:43 360阅读 0赞

**引入阿里巴巴适量图标实例：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>

//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"}

转载于:https://www.cnblogs.com/studyh5/p/10276782.html