How does the WeChat applet map show the walking route of nearby toilets WC

Preface

It was quite early to use Tencent's location service for the first time, when it was used on the web. Later, individuals gradually came into contact with small programs, and once needed to be able to display various shops nearby, so that they could quickly locate any delicious and good places to shop around. Then, every time we travel to a place, one of our indispensable needs is to go to WC. At that time, we were thinking about how to quickly locate the location of the surrounding WC and walking routes through a map. Now it’s good, with Tencent’s location service function. It can be used directly on the small program, and can be used to achieve the required functions with the help of the giant's power.

Therefore, writing this article is also hoping to summarize the steps and knowledge points of connecting with Tencent's location service, so that developers can quickly get started and use.

Apply for Key

Create a key for a certain business or a certain scene of your own. With this key, you can start the map function experience! Direct WeChat scan code to authorize login is enough. The Tencent list function is much more convenient to use WeChat scan code to log in, eliminating the old good way to log in with a password.

Click the menu in the background: key and quota->key management, fill in the specific developer key application information as follows

Set domain name

Mini Program Management Backstage -> Development -> Development Management -> Development Settings -> "Server Domain Name", set the request legal domain name, add https://apis.map.qq.com

Introduce js

Click the WeChat applet JavaScript SDK in the development document of the official website to download

// 引入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);
          }
      });
  }
})

Use the map

Use the map component, the specific parameters can be viewed in the official WeChat document

Reminder: By default, the top of the Mini Program interface is a title bar with a white background and a fixed height. If you need to hide the top title bar, you need to add "navigationStyle": "custom" to the window in the app.json configuration.

Default renderings

When the map component parameters are not set, the default effect is as follows

view code

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

Show label

Add a label to the default coordinates. The label can be an array or coordinate point array value, so that the effect on the map is multiple label points

marker: The marker point is used to display the location of the marker on the map

Key code: markers:[{longitude:'113.390451',latitude:'23.048914'}]
Multiple labels: markers:[{longitude:'113.390451',latitude:'23.048914'},{longitude:'113.390451',latitude:'23.048914'}]

• bindmarkertap: triggered when the marker is clicked
• bindlabeltap: triggered when the label is clicked
• bindcallouttap: triggered when the bubble corresponding to the marked point is clicked

Default annotation effect

js code

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

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

Label display text

js code effect

js code

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

WC route planning

There are also style settings below, such as: arrows, line colors, and text display of the start and end points, etc., which are purely default parameters

js code

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

<!--地图容器-->
<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>

Open a personalized Tencent map

WeChat scan code binding, WeChat will determine whether the current Mini Program is registered with Tencent Location Service. If it is prompted that it is not registered, then you can enter the registered account, usually a mobile phone number to log in to complete the binding of the Mini Program and Tencent Location Service account.

Some plugins also need to apply for appid separately

Original author: Xiao 5 chat
Original link: https://blog.csdn.net/lmy_520/article/details/112677899