乐趣区

关于javascript:微信小程序地图如何显示附近厕所WC步行路线

jiezi

前言

第一次应用腾讯位置服务也算是挺早的，过后是在 web 端应用。起初，集体缓缓接触到小程序，有一次的需要是可能展现左近的各类店铺，不便本人疾速定位四周有什么好吃好逛的中央。再起初每次到一个中央游览，咱们必不可少的一个需要就是须要上 WC，过后就在想如何通过一个地图来实现疾速定位周边 WC 的地位以及步行路线，当初好了，有腾讯位置服务性能能够间接在小程序下面间接应用，借助伟人的力量能够好好施展去实现需求性能了。

因而，写这篇文章，也是心愿可能总结对接腾讯位置服务性能步骤和知识点，不便开发同行疾速上手和应用。

申请 Key

创立用于本人某一业务或某一场景的 Key 密钥，领有这把钥匙，就能够开始地图功能体验啦！间接微信扫码受权登录即可，腾讯列表性能应用微信扫码登录不便好多，省去了古老须要明码登录的好形式。

后盾点击菜单：key 与配额 ->key 治理，具体开发者密钥申请信息填写如下

设置域名

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

引入 js

点击官网的开发文档中的微信小程序 JavaScript SDK 进行下载 

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

原文作者：小 5 聊
原文链接：https://blog.csdn.net/lmy_520…

退出移动版