腾讯位置服务---vue微信小程序SDK使用(一)---下载SDK并再次封装

今天药忘吃喽~ 2022-11-02 15:22 349阅读 0赞

下载地址以及文档 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
腾讯位置服务 可以 地点搜索 关键词提醒 逆地址解析 地址解析 路线规划 距离计算 获取城市列表
大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910

下载SDK并再次封装

  • 下载
  • 再次封装
    • 如果你是 uniapp
    • 如果不是uniapp
  • 测试

下载

下载地址 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
下载后 记得申请密钥
在这里插入图片描述启用WebServiceApi
在这里插入图片描述

拿到key 调用接口要用到
在这里插入图片描述

再次封装

如果你是 uniapp

新建目录 common/mapApi 新建文件 common/mapApi/index.js
将下载好的文件放入
可以把min的删除
在这里插入图片描述

在index.js中

  1. const QQMapWX = require('./qqmap-wx-jssdk.js')
  3. const mapApi = new QQMapWX({ 
  4.     key: "位置服务后台 拿到的key值"
  5. })
  7. module.exports = mapApi;

如果不是uniapp

目录如下
在这里插入图片描述同样在index中

  1. const QQMapWX = require('./qqmap-wx-jssdk.js')
  3. const mapApi = new QQMapWX({ 
  4.     key: "位置服务后台 拿到的key值"
  5. })
  7. module.exports = mapApi;

测试

我们进行地点搜索

文档地址 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch
这是官网的用法
在这里插入图片描述我们写个测试
引入
在这里插入图片描述

测试方法
在这里插入图片描述

  1. test() { 
  2.     mapApi.search({ 
  3.         keyword: "酒店",
  4.         success: res => { 
  5.             console.log(res)
  6.         }
  7.     })
  8. }

测试成功
在这里插入图片描述

大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910

发表评论

表情：
评论列表 （有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读