美文网首页
微信小程序中腾讯位置API使用

微信小程序中腾讯位置API使用

作者: 波叫怪 | 来源:发表于2019-05-03 20:26 被阅读0次

    微信小程序中腾讯位置API使用

    本例主要是针对于微信小程序的定位

    准备工作

    1. 申请开发者密钥(key):<a href="https://lbs.qq.com/console/key.html">申请密钥</a>
    2. 开通webserviceAPI服务:控制台 -> <a href="https://lbs.qq.com/console/mykey.html?console=mykey">key管理</a> -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存
    3. 下载微信小程序JavaScriptSDK,<a href="http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip">微信小程序JavaScriptSDK v1.2</a>,==下完了把两个js文件放进项目中==
    4. 安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com,或者==开发时选择不校验合法域名==

    小程序示例

    通过关键字查询附近poi

    var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js'); //引入SDK核心类
    var qqmapsdk;
    Page({
        onLoad: function () {
            // 实例化API核心类
            qqmapsdk = new QQMapWX({
                key: '申请的key'
            });
        },
        onShow: function () {
            // 调用接口
            qqmapsdk.search({
                keyword: '这里可以填写关键字',
                success: function (res) {
                    console.log(res);
                },
                fail: function (res) {
                    console.log(res);
                },
            complete: function (res) {
                console.log(res);
            }
        });
    })
    

    逆地址解析(坐标位置描述)

    var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js'); //引入SDK核心类
    var qqmapsdk;
    Page({
        onLoad: function () {
            // 实例化API核心类
            qqmapsdk = new QQMapWX({
                key: '申请的key'
            });
        },
         onShow: function (options){
             this.getLocal();
        },
        //调用微信api获取经纬度然后传入地图API
          getLocation: function(){
            let vm = this;
            wx.getLocation({
              type: 'wgs84',
              altitude: true,
              success: function(res) {
                console.log(res);
                var latitude = res.latitude;
                var longitude = res.longitude;
                vm.getLocal(latitude, longitude)
              },
              fail: function(res){
                console.log('获取经纬度失败fail')
              }
            })
          },
          //获取当前地理位置
          getLocal: function (latitude, longitude){
            let vm = this;
            qqmapsdk.reverseGeocoder({
              location: {
                latitude: latitude,
                longitude: longitude
              },
              success: function (res) {
                console.log(res);
              },
              fail: function (res) {
                console.log('获取API定位信息失败');
              }
            })
          }
        })
    

    关于位置API参数问题

    <a href="https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html">官方文档</a>上有详细介绍,这里我讲一下官方文档中不太能弄清楚的地方

    1. 如果是使用小程序原生开发,API中类似于==poi_options=page_index=1==都是写为poi_options:'page_index=1'格式
    2. filter过滤器的参数需要把类型转化为url编码再传入,例如:
    //地址搜索,排除掉公交站的信息
    search: function(e){
        var vm = this
        console.log(e.detail.value);
        qqmapsdk.search({
          keyword: e.detail.value,  //搜索关键词
          region: location,
          filter: 'category<>%E5%85%AC%E4%BA%A4%E8%BD%A6%E7%AB%99',
          success: function (res) {
            console.log(res)
          }
        })
      },
    

    关于如何转化url编码

    你把想要的东西输入这个<a href="http://tool.oschina.net/encode?type=4">转换编码网站</a>,转换了复制粘贴到代码中就ok了!

    相关文章

      网友评论

          本文标题:微信小程序中腾讯位置API使用

          本文链接:https://www.haomeiwen.com/subject/luiznqtx.html