腾讯位置服务----＞(小程序简单使用+显示附近WC步行路线)

àì夳堔傛蜴生んèń 2023-01-09 12:35 315阅读 0赞

### 体验腾讯位置服务功能，请请点击下方链接 ###

[https://lbs.qq.com?lbs\_invite=9QNIFL9][https_lbs.qq.com_lbs_invite_9QNIFL9]

### 1.申请Key： ###

[地址：点击此连接登录注册申请Key][Key]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70][]

### 2.设置域名： ###

小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 1][]

### 3.引入js： ###

下载地址：[https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview][https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_jsSdkOverview]

[JavaScriptSDK v1.2][]

1.  `// 引入SDK核心类，js文件根据自己业务，位置可自行放置`
2.  `var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');`
3.  `var qqmapsdk;`
4.  `Page({`
5.  `data:{`
6.  `longitude:'113.390451',`
7.  `latitude:'23.048914'`
8.  `},`
9.  `onLoad: function () {`
10. `// 实例化API核心类`
11. `qqmapsdk = new QQMapWX({`
12. `key: 'XSJBZ-FTRKR-E77WZ-WLE4L-XBGW7-QIFRZ'`
13. `});`
14. `},`
15. `onShow: function () {`
16. `// 调用接口`
17. `qqmapsdk.search({`
18. `keyword: '广州大学城',`
19. `success: function (res) {`
20. `//console.log(res);`
21. `},`
22. `fail: function (res) {`
23. `//console.log(res);`
24. `},`
25. `complete: function (res) {`
26. `console.log(res);`
27. `}`
28. `});`
29. `}`
30. `})`

### 4.使用地图： ###

map组件

备注：隐藏顶部标题的方法，在app.json配置里的window里加"navigationStyle": "custom",

1.  `<view class='view'>`
2.  `<map longitude="{ {longitude}}" latitude="{ {latitude}}"></map>`
3.  `</view>`

什么也没加的情况下，是如下效果图

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 2][] ###

### 5.显示标注： ###

给默认坐标加个标注，标注可以是数组，坐标点数组值

*  js代码

1.  `关键代码：markers:[{longitude:'113.390451',latitude:'23.048914'}]`
2.  `多个标注：markers:[{longitude:'113.390451',latitude:'23.048914'},{longitude:'113.390451',latitude:'23.048914'}]`

1.  `// 引入SDK核心类，js文件根据自己业务，位置可自行放置`
2.  `var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');`
3.  `var qqmapsdk;`
4.  `Page({`
5.  `data:{`
6.  `longitude:'113.390451',`
7.  `latitude:'23.048914',`
8.  `markers:[{longitude:'113.390451',latitude:'23.048914'}]`
9.  `},`
10. `onLoad: function () {`
11. `// 实例化API核心类`
12. `qqmapsdk = new QQMapWX({`
13. `key: 'XSJBZ-FTRKR-E77WZ-WLE4L-XBGW7-QIFRZ'`
14. `});`
15. `},`
16. `onShow: function () {`
17. `// 调用接口`
18. `qqmapsdk.search({`
19. `keyword: '广州大学城',`
20. `success: function (res) {`
21. `//console.log(res);`
22. `},`
23. `fail: function (res) {`
24. `//console.log(res);`
25. `},`
26. `complete: function (res) {`
27. `console.log(res);`
28. `}`
29. `});`
30. `}`
31. `})`

*  view代码

1.  `<view class='view'>`
2.  `<map longitude="{ {longitude}}" latitude="{ {latitude}}" markers="{ {markers}}"></map>`
3.  `</view>`

默认标注效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 3][]

【标注显示文本】

*  js代码

1.  `//关键代码`
2.  `//markers属性下还有属性成员-{label:{content:'广州番禺大学城'}`
3.  `data:{`
4.  `markers:[{label:{content:'广州番禺大学城'},longitude:'113.390451',latitude:'23.048914'}]`
5.  `},`

*  效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 4][]

### 6.WC路线规划： ###

效果

下面的还有做样式设置，比如：箭头、和线路颜色，以及起点和终点的文本显示等等，纯属默认参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 5][]

### 7.开启个性化腾讯地图： ###

微信扫码绑定，微信会判断当前小程序是否注册腾讯位置服务，如果提示未注册，那么可以输入已注册的账号，一般是手机号码登录，完成小程序和腾讯位置服务账号的绑定。

有些插件还要另外申请appid

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 6][]

[https_lbs.qq.com_lbs_invite_9QNIFL9]: https://lbs.qq.com/?lbs_invite=9QNIFL9
[Key]: https://lbs.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70]: /images/20221119/5657eb7eb4f541a6b36fe515508586aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210115172219632.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA=,size_16,color_FFFFFF,t_70
[https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_jsSdkOverview]: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
[JavaScriptSDK v1.2]: https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210115173222144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210115174006973.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210120103120700.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210120104538703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210115171744579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xteV81MjA=,size_16,color_FFFFFF,t_70