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

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

点击以下链接报名体验吧

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

【申请Key】

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

【设置域名】

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

【引入js】

下载地址：qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview">​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",

• 默认效果图 

地图组件参数什么也没设置的情况下，默认如下效果图 

• view代码

<view class='view'>
  <map longitude="{{longitude}}" latitude="{{latitude}}"></map>
</view>

【显示标注】

给默认坐标加个标注，标注可以是数组，坐标点数组值，这样在地图的效果就是多个标注点

marker：标记点用于在地图上显示标记的位置

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

• bindmarkertap：点击标记点时触发
• bindlabeltap：点击标记点label时触发
• bindcallouttap：点击标记点对应的气泡时触发

• 默认标注效果

• js代码

// 引入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代码

<view class='view'>
  <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>
</view>

【标注显示文本】

• js代码效果

• js代码

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

【WC路线规划】

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

• 效果

• js代码

• view代码

【开启个性化腾讯地图】

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

有些插件还要另外申请appid

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

更多内容详见微信公众号：Python研究所