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

admin 管理员组

文章数量: 887017

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

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

• 点击我快速报名体验吧

【前言】

第一次使用腾讯位置服务也算是挺早的，当时是在web端使用。后来，个人慢慢接触到小程序，有一次的需求是能够展示附近的各类店铺，方便自己快速定位周围有什么好吃好逛的地方。再后来每次到一个地方旅游，我们必不可少的一个需求就是需要上WC，当时就在想如何通过一个地图来实现快速定位周边WC的位置以及不行路线，鉴于那时还没太了解小程序里也开始集成了腾讯位置服务，所以仅仅是一个想法和构思，现在好了，有腾讯位置服务功能可以直接在小程序上面直接使用，借助巨人的力量可以好好发挥去实现需求功能了。

因此，写这篇文章，也是希望能够总结对接腾讯位置服务功能步骤和知识点，方便开发同行快速上手和使用。

【申请Key】

创建用于自己某一业务或某一场景的Key密钥，拥有这把钥匙，就可以开始地图功能体验啦！直接微信扫码授权登录即可，腾讯列表功能使用微信扫码登录方便好多，省去了古老需要密码登录的好方式。

• 点击我快速登录注册申请Key

• 后台点击菜单

key与配额 ->key管理，具体开发者密钥申请信息填写如下

【设置域名】

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

【引入js】

下载地址：微信小程序JavaScript SDK | 腾讯位置服务

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: '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);
          }
      });
  }
})

【使用地图】

使用地图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: '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代码效果

• js代码

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

【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

【常见情况】

1、IP未授权

IP未被授权，解决方法见：https://lbs.qq/faq/serverFaq/webServiceKey

指的是自己所在的外网IP

 登录腾讯位置服务，编辑Key进行IP白名单授权，同时可以授权对应的APP ID小程序

2、Ajax调用服务API跨域

关键点

1）加上跨域标志，jsonp

2）地址参数后面加上参数，output=jsonp

温馨提示：其实在前端直接通过ajax方式调用不太好，因为本地外网IP可能随时变动，一般都是通过传递经纬度值到后台服务器固定外网IP且是授权的IP进行接口调用

 var url = "https://apis.map.qq/ws/geocoder/v1/?location=39.984154,116.307490&key=XSJBZ-FTRKR-E77WZ-WLE4L-XBGW7-QIFRZ&get_poi=1&output=jsonp";

                $.ajax({
                    type: "get",
                    async: false,
                    url: url,
                    dataType: 'jsonp',
                    headers: {
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Methods': 'GET,POST',
                    },
                    success: function (json) {
                        debugger
                        console.log("json",json);
                    },
                    error: function (json) {
                        console.log("error",json);
                    }
                });

C# 模拟Http-Get获取地址位置信息

string url = "https://apis.map.qq/ws/geocoder/v1";
string key = "申请的Key";
string post_data = $"{{location:\"{entity.latitude},{entity.longitude}\",\"key\":\"{key}\",\"get_poi\":1,\"output\":\"jsonp\"}}";
url = url + "?location=" + entity.latitude + "," + entity.longitude + "&key=" + key + "&get_poi=1";
string response = Get(url);

public static string Get(string url)
{
    Stream instream = null;
    StreamReader sr = null;
    HttpWebResponse response = null;
    HttpWebRequest request = null;
    Encoding encoding = Encoding.UTF8;

        request = WebRequest.Create(url) as HttpWebRequest;
        CookieContainer cookieContainer = new CookieContainer();
        request.CookieContainer = cookieContainer;
        request.AllowAutoRedirect = true;
        request.Method = "GET";
        request.ContentType = "application/x-www-form-urlencoded";

        response = request.GetResponse() as HttpWebResponse;

        instream = response.GetResponseStream();
        sr = new StreamReader(instream, encoding);

        string content = sr.ReadToEnd();
}

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

本文标签： 腾讯 路线 位置 简单 程序