微信小程序获取用户位置以及用户搜索位置跳转

最新推荐文章于 2024-03-31 00:28:24 发布

1个pink

最新推荐文章于 2024-03-31 00:28:24 发布

阅读量417

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/style1226yi/article/details/130347141

版权

该文章详细介绍了如何配置腾讯位置服务的key，包括在微信开放文档中设置服务器域名，更新app.json以请求用户位置信息，引入QQMapWXJSSDK，并展示了在小程序中获取和使用地理位置信息进行搜索及导航的功能。

摘要由CSDN通过智能技术生成

1.腾讯位置服务申请key配置权限

链接：腾讯位置服务 - 立足生态，连接未来

2.在微信开放文档配置服务器域名request合法域名：

https://apis.map.qq.com

3.app.json里配置

"requiredPrivateInfos": [ 
    "getLocation"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

4.下载相关sdk----qqmap-wx-jssdk1.2

链接：https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip

5.引入相关代码

.wxml

<view class="wrap">
  <map longitude="{{lo}}" latitude="{{la}}" scale="18"  markers="{{markers}}"/>
  <van-search value="{{ value }}" bind:search="onSearch" placeholder="请输入搜索关键词" />
</view>

.js代码

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: 'LIYBZ-TFXRH-MS5DF-W6QZD-B5DRF-HWBTI'
});

//获取当前位置
onLoad(options) {
    //获取当前地址
    let _this = this;
    // 正常方式获取地址
    wx.getLocation({
      type: 'wgs84',
      success:function(res){
        console.log(res,'res')
        _this.setData({
          la:res.latitude,
          lo:res.longitude,
          markers:[{
            iconPath:"../../static/img/定点.png",
            latitude: res.latitude,
            longitude: res.longitude,
            id: 0,
			      width: 34,
			      height: 34
          }]
        })
        // console.log(res,'11')
        var demo = new QQMapWX({
          key:'LIYBZ-TFXRH-MS5DF-W6QZD-B5DRF-HWBTI'
        });
        // 解析地址
        demo.reverseGeocoder({//地址解析
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: function (res) {//转为具体地址
            console.log(res,'具体地址');
          },
          fail: function (res) {
            console.log(res);
          }
        });
      }
    })
  },
   //搜索地址跳转导航
  onSearch(address){
    // console.log(address.detail,'address')
    //调用地址解析接口
    qqmapsdk.geocoder({
      //获取表单传入地址
      address: address.detail, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
      success: function (res) { //成功后的回调
        // console.log(res);
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        // 搜索到的经纬度结果打开地图进行导航
        wx.openLocation({
          latitude,
          longitude,
          scale: 14
        })
      }
    })
  },