微信小程序腾讯位置服务

Rouer_jia

于 2024-01-12 15:35:32 发布

阅读量895

点赞数 9

分类专栏： WEB前端微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/Rouer_jia/article/details/135554560

版权

WEB前端微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

腾讯位置服务

网址 : https://lbs.qq.com

逆地址解析可以实现位置

先读入门及使用限制
登录 - 手机号登录

申请开发者密钥（key）：申请密钥
开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
下载JavaScriptSDK1.2;
SDK叫做应用程序开发工具包, JavaScriptSD是一个js脚本文件, 里面有很多js代码, 我们可以直接进行调用,然后直接操作腾讯位置服务
安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

小程序示例 - 简化官方文档

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
    key: '申请的key'
});
//这个是搜索位置,我们需要的是当前位置的城市名称
//使用逆地址解析 - 获取当前位置的逆地址解析
 qqmapsdk.search({
         keyword: '酒店',
         success: function (res) {
             console.log(res);
         },
// 逆地址解析用于通过经纬度，获取该位置的中文描述
qqmapsdk.reverseGeocoder({
    success: function (res) {
        console.log(res);  // 获取逆地址解析的结果
    }
})

实现首页左上角城市名称的显示

解压JavaScriptSDK v1.2.zip. 将qqmap-wx-jssdk.js放入项目根目录下的 /libs 文件夹下（如果没有则手动创建）。
在onLoad时，就需要加载左上角城市名称。

//index.js
page({
	data:{
        cityname:'',  //用于绑定城市名称
    },
   loadCurrentCity(){
        let QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
        let qqmapsdk= new QQMapWX({
            key: '7NGBZ-6STYU-QP6VR-B6JKP-VT36F-2RBTB'
        })
        qqmapsdk.reverseGeocoder({
            success: (res)=> {//成功后的回调
                console.log("逆地址解析结果:",res);
                let cityname = res.result.address_component.city;
                console.log("逆解析地址:",cityname);
                //箭头函数,不影响this指向问题
                this.setData({cityname})
                //将数据保存到全局
                getApp().globalData.cityname=cityname
            },
            fail:(err)=>{
                console.warn(err);
            }
       })
    },
  onLoad(){
	this.loadCurrentCity();
  },
  onShow(){
        // 获取globalData中的城市名称，更新左上角即可
        let cityname = getApp().globalData.cityname
        console.log('首页onShow获取城市:'+cityname)
        this.setData({cityname})
    }
})
//设置完成之后, 将缓存全部清除,然后重新编译
//会出现报错 - 去app.json中配置位置信息
"permission": {
        "scope.userLocation": {
            "desc": "赶紧给我地址,不然的话小心手机爆炸"
        }
    },

//app.js
App({
    onLaunch: function () {
        wx.cloud.init({
            env: 'cloud1-3gb10u4tf5483bd9'
        })
    },
    globalData:{
        cityname:"北京市"
    }
})

点击首页城市,跳转到选择城市页面 citylist

// index.wxml
<!-- 自动定位城市开始 -->
    <view class="city-entry">
        <navigator url="/pages/citylist/citylist">
          <text class="city-name">{{cityname}}</text>
          <text class="city-entry-arrow"></text>
        </navigator>
    </view>
    <!-- 自动定位城市结束 -->

将map.js保存到libs下, 引入

//citylist.js
loadCurrentCity(){
    let QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
    let qqmapsdk= new QQMapWX({
        key: '7NGBZ-6STYU-QP6VR-B6JKP-VT36F-2RBTB'
    })
    qqmapsdk.reverseGeocoder({
        success: (res)=> {//成功后的回调
            console.log("逆地址解析结果:",res);
            let cityname = res.result.address_component.city;
            console.log("逆解析地址:",cityname);
            //箭头函数,不影响this指向问题
            this.setData({cityname})
            getApp().globalData.cityname=cityname
        },
        fail:(err)=>{
            console.warn(err);
            if(err.status==1000){
                this.setData({
                    cityname: '定位失败，点击重试'
                  })
            }
        }
   })
},

渲染城市列表

data: {
    map:map,
    cityname:'未选择',
    letter:'A'
},

<view class="city-left">
      <scroll-view 
          scroll-y="true" 
          style="height:100vh"
          scroll-with-animation="true"
          enable-back-to-top="true"
 		 scroll-into-view="{{letter}}"
>
          <view class="city-group-item" wx:for="{{map}}" wx:key="index">
            <view class="city-group-title" id="{{index}}">{{index}}</view>
            <view class="city-fullname" wx:for="{{item}}" wx:key="id" wx:for-index="i" wx:for-item="c">
              <text bindtap="handleTapCity" data-c="{{c.fullName}}">{{c.fullName}}</text>
            </view>
        </view>   
      </scroll-view>
    </view>
    <view class="city-right">
      <view class="py-item" wx:for="{{map}}" wx:key="index">
        <text bindtap="handleTapLetter" data-l="{{index}}">{{index}}</text>
      </view>      
    </view>

handleTapLetter(e){
        let l = e.target.dataset.l; //获取data-l属性的值
        console.log(l);
        this.setData({letter:l})
    },
    handleTapCity(e){
        let name = e.target.dataset.c;
        console.log(name);
        let app = getApp();
        app.globalData.cityname = name;
        wx.navigateBack();
    },

影院页面

// theatre.js
data: {
    cityname:'',
    moviesList:[]
  },
onShow(){
      //获取globalData.cityname
      let cityname = getApp().globalData.cityname;
      console.log(cityname)
      this.setData({cityname})
      //加载当前城市的影院列表
      let QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
      let qqmapsdk= new QQMapWX({
          key: '7NGBZ-6STYU-QP6VR-B6JKP-VT36F-2RBTB'
      })
      qqmapsdk.search({
          keyword:'电影院',
          region:cityname,
          //page_size:20,  //每页20条,最多20条
          success:(res)=>{
              //默认10条
              console.log('加载影院列表:',res)
              //对res.data进行处理
              res.data.forEach(item=>{
                  item._dis = (item._distance/1000).toFixed(2)
              })
              this.setData({moviesList:res.data})
          }
      })
  },

<view class="item mb-line-b" wx:for="{{moviesList}}" wx:key="index">
  <view class="title-block">
    <view class="title line-ellipsis">{{item.title}}</view>
    <view class="location-block">
        <view class="flex line-ellipsis">{{item.address}}</view>
        <view class="distance">{{item._dis}}km</view>
    </view>
    <view class="label-block">
      <text class="allowRefund">电话:</text>
      <text class="vipTag">{{item.tel?item.tel:'暂无'}}</text>
    </view>
  </view>
</view>

地图引入问题

自 2022 年 7 月 14 日后发布的小程序，使用以下8个地理位置相关接口时，需要声明该字段，否则将无法正常使用。2022 年 7 月 14 日前发布的小程序不受影响。
申明需要使用的地理位置相关接口，类型为数组。目前支持以下项目：
getFuzzyLocation: 获取模糊地理位置
getLocation: 获取精确地理位置
onLocationChange: 监听试试地理位置变化事件
startLocationUpdate: 接收位置消息（前台）
startLocationUpdateBackground: 接收位置消息（前后台）
chooseLocation: 打开地图选择位置
choosePoi: 打开 POI 列表选择位置
chooseAddress: 获取用户地址信息

{
  "pages": ["pages/index/index"],
  "requiredPrivateInfos": [
    "getFuzzyLocation",   // 会出现冲突
    "getLocation",
    "onLocationChange",
    "startLocationUpdateBackground"
    "chooseAddress"
  ]
}