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

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

https://lbs.qq.com?lbs_invite=9QNIFL9

1.申请Key：

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

2.设置域名：

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

3.引入js：

下载地址：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>

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

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>

默认标注效果

【标注显示文本】

• js代码

1. //关键代码

2. //markers属性下还有属性成员-{label:{content:'广州番禺大学城'}

3. data:{

4. markers:[{label:{content:'广州番禺大学城'},longitude:'113.390451',latitude:'23.048914'}]

5. },

• 效果

6.WC路线规划：

效果

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

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

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

有些插件还要另外申请appid