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

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

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

### 下载SDK并再次封装 ###

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

# 下载 #

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

拿到key 调用接口要用到  
![在这里插入图片描述][20210225180930221.png]

# 再次封装 #

## 如果你是 uniapp ##

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

在index.js中

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

## 如果不是uniapp ##

目录如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]同样在index中

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

# 测试 #

我们进行地点搜索

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

测试方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]

test() { 
    	mapApi.search({ 
    		keyword: "酒店",
    		success: res => { 
    			console.log(res)
    		}
    	})
    }

测试成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]

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

[https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_jsSdkOverview]: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221024/a5f4cb6f0a944d71a427ad312d82a7c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221024/5ef066126a4742e9a60aecc1d96069f3.png
[20210225180930221.png]: /images/20221024/8c80c48cb04b466aaecd0db168c452e4.png
[20210225181517880.png]: /images/20221024/36ac51292a894ed7902d7619644b5745.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: /images/20221024/b1bdab3933b74a4ebb7b606ef2a689ae.png
[https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_methodSearch]: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: /images/20221024/4b72cd52f67d495cb7e2f22d0d8cb158.png
[20210225183552951.png]: /images/20221024/f27e43c2cc24472e9d347a0c8cbbd294.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]: /images/20221024/2f79883e03d0431998d28736cdf9353b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]: /images/20221024/9eb0f7d512f14dc2ba93a330609a8ebb.png