【小5聊】腾讯位置服务之小程序简单使用以及显示附近WC步行路线

【一起来体验腾讯位置服务功能】

点击以下链接报名体验吧

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

【申请Key】

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

【设置域名】

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

【引入js】

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

JavaScriptSDK v1.2

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
    data:{
      longitude:'113.390451',
      latitude:'23.048914'
    },
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: 'XSJBZ-FTRKR-E77WZ-WLE4L-XBGW7-QIFRZ'
        });
    },
    onShow: function () {
      // 调用接口
      qqmapsdk.search({
          keyword: '广州大学城',
          success: function (res) {
              //console.log(res);
          },
          fail: function (res) {
              //console.log(res);
          },
          complete: function (res) {
              console.log(res);
          }
      });
  }
})

【使用地图】

map组件

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

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

【显示标注】

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

• js代码

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

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
    data:{
      longitude:'113.390451',
      latitude:'23.048914',
      markers:[{longitude:'113.390451',latitude:'23.048914'}]
    },
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: 'XSJBZ-FTRKR-E77WZ-WLE4L-XBGW7-QIFRZ'
        });
    },
    onShow: function () {
      // 调用接口
      qqmapsdk.search({
          keyword: '广州大学城',
          success: function (res) {
              //console.log(res);
          },
          fail: function (res) {
              //console.log(res);
          },
          complete: function (res) {
              console.log(res);
          }
      });
  }
})

 

• view代码

默认标注效果

【标注显示文本】

• js代码

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

• 效果

【WC路线规划】

效果

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

 

【开启个性化腾讯地图】

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

有些插件还要另外申请appid

 

更多完善功能持续更新中...