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

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

结合自己小程序业务,集成腾讯位置服务地图功能还是不错的,推荐各位同行提前体验和使用
【前言】

第一次使用腾讯位置服务也算是挺早的,当时是在web端使用。后来,个人慢慢接触到小程序,有一次的需求是能够展示附近的各类店铺,方便自己快速定位周围有什么好吃好逛的地方。再后来每次到一个地方旅游,我们必不可少的一个需求就是需要上WC,当时就在想如何通过一个地图来实现快速定位周边WC的位置以及不行路线,鉴于那时还没太了解小程序里也开始集成了腾讯位置服务,所以仅仅是一个想法和构思,现在好了,有腾讯位置服务功能可以直接在小程序上面直接使用,借助巨人的力量可以好好发挥去实现需求功能了。
因此,写这篇文章,也是希望能够总结对接腾讯位置服务功能步骤和知识点,方便开发同行快速上手和使用。
【申请Key】
创建用于自己某一业务或某一场景的Key密钥,拥有这把钥匙,就可以开始地图功能体验啦!直接微信扫码授权登录即可,腾讯列表功能使用微信扫码登录方便好多,省去了古老需要密码登录的好方式。

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


后台点击菜单
key与配额 ->key管理,具体开发者密钥申请信息填写如下

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

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

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

【引入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',
      markers:[{longitude:'113.390451',latitude:'23.048914'}]
    },
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: 'xxxx-xxxx,你自己申请到的key'
        });
    },
    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代码效果

腾讯位置服务之小程序简单使用以及显示附近WC步行路线
  • js代码
//关键代码
//markers属性下还有属性成员-{label:{content:'广州番禺大学城'}
data:{
    markers:[{label:{content:'广州番禺大学城'},longitude:'113.390451',latitude:'23.048914'}]
},

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

效果

腾讯位置服务之小程序简单使用以及显示附近WC步行路线
  • js代码
// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
    data:{
      longitude:'113.390451',
      latitude:'23.048914',
      markers:[{label:{content:'广州番禺大学城'},longitude:'113.390451',latitude:'23.048914'}]
    },
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: 'xxxx-xxxx,你自己申请到的key'
        });
    },
    onShow: function () {
      // 调用接口
      qqmapsdk.search({
          keyword: 'GoGo厕所',
          success: function (res) {
              //console.log(res);
          },
          fail: function (res) {
              //console.log(res);
          },
          complete: function (res) {
              console.log(res);
          }
      });
  },
  //触发表单提交事件,调用接口
  formSubmit(e) {
    //起点坐标:23.048914,113.390451 
    //终点坐标:23.061793,113.392056
 
    //23.061793,113.392056
    //23.063073,113.391762
 
    var _this = this;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
      //from参数不填默认当前地址
      from: e.detail.value.start,
      to: e.detail.value.dest, 
      success: function (res) {
        console.log(res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压(返回的点串坐标,通过前向差分进行压缩)
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log(pl)
        //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
        _this.setData({
          latitude:pl[0].latitude,
          longitude:pl[0].longitude,
          polyline: [{
            points: pl,
            color: '#FF0000DD',
            width: 4
          }]
        })
      },
      fail: function (error) {
        console.log(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  }
})
  • view代码
<!--地图容器-->
<map
id="myMap"
style="width: 100%; height: 300px;"
longitude="{{longitude}}" latitude="{{latitude}}"
scale='16'
polyline="{{polyline}}"
show-location
>
</map>
<form bindsubmit="formSubmit">
    <!--输入起点和目的地经纬度坐标,格式为string格式-->
    <!--起点输入框,同终点,不填默认当前位置-->
    <label>起点坐标:<input style="border:1px solid #000;" name="start"></input></label>
    <!--终点输入框,例:39.984060,116.307520-->
    <label>终点坐标:<input style="border:1px solid #000;" name="dest"></input></label> 
    <!--提交表单数据-->
    <button form-type="submit">路线规划</button>
</form>

【开启个性化腾讯地图】

微信扫码绑定,微信会判断当前小程序是否注册腾讯位置服务,如果提示未注册,那么可以输入已注册的账号,一般是手机号码登录,完成小程序和腾讯位置服务账号的绑定。
有些插件还要另外申请appid

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

本文来自投稿,不代表跨境高阶网立场,如若转载,请注明出处:https://youshijiaowo.com/%e8%85%be%e8%ae%af%e4%bd%8d%e7%bd%ae%e6%9c%8d%e5%8a%a1%e4%b9%8b%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8%e4%bb%a5%e5%8f%8a%e6%98%be%e7%a4%ba%e9%99%84%e8%bf%91wc%e6%ad%a5%e8%a1%8c/

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

评论列表(4条)

  • delta 8 thc medical benefits
    delta 8 thc medical benefits 2021年7月12日 下午12:44

    I do not even understand how I ended up here,
    but I believed this put up used to be great.
    I don’t understand who you are but definitely you’re going to a
    well-known blogger should you aren’t already.

    Cheers!

  • xeno hemp delta 8 gummies
    xeno hemp delta 8 gummies 2021年7月13日 上午2:00

    Hey there superb blog! Does running a blog like this
    require a great deal of work? I have absolutely no
    expertise in coding however I had been hoping to start my own blog in the near future.

    Anyhow, if you have any ideas or techniques for new blog owners please share.
    I know this is off topic but I just wanted to ask. Many thanks!

  • delta 8 carts what's in them
    delta 8 carts what's in them 2021年7月19日 上午6:15

    Spot on with this write-up, I absolutely believe
    this website needs a lot more attention. I’ll probably be returning to see more, thanks for the information!

我们的知乎
分享本页
返回顶部