Wechat applet coordinate location interface usage (II) map interface

Use and arrangement of coordinate position interface of wechat applet ( Two )

Realize more map services in wechat applet , You can use Tencent map Api.

The following scenarios are using maps Api call .

official Api: Wechat applet JavaScript SDK | Tencent location service

One 、 Tencent maps are used in wechat apps Api technological process

1. Log in to the official website of Tencent maps , Apply for the secret key

2. download JavaScriptSDK, To project

 3. Applet background , Domain name whitelist , Set up request Legitimate domain name , add to https://apis.map.qq.com

Initialization in the project , Use interface

var QQMapWX = require('../../../utils/qqmap-wx-jssdk.min');
var map = null;

    // initialization 
    map = new QQMapWX({
      key: 'PNYBZ-XNV36-X64SW-EALEI-2C63E-6MFNJ'
    });

Two 、 Near the designated location “ key word ” Search for

    // Near the designated location “ key word ” Search for 
    map.search({
      keyword: ' Bank ',
      location: {
        latitude: '36.656858',
        longitude: '116.916358'
      },
      success: res => {
        console.info(res);
      }
    });

3、 ... and 、 Inverse analysis , Obtained by coordinates , Location name

    // Inverse analysis , Obtained by coordinates , Location name 
    map.reverseGeocoder({
      location: {
        latitude: '36.656858',
        longitude: '116.916358'
      },
      success: res => {
        console.info(res);
      }
    });

Four 、 analysis , Get the coordinates corresponding to the position

    // analysis , Get the coordinates corresponding to the position , Le Meng center, Jingshi Road, Huaiyin District, Jinan City 3 building 3103 room 
    map.geocoder({
      address:' Le Meng center, Jingshi Road, Huaiyin District, Jinan City 3 building 3103 room ',
      success:res=>{
        console.info(res);
      }
    });

5、 ... and 、 Use maps , Route planning

  // Use maps , Route planning 
    map.direction({
      // mode: 'driving',
      from: {
        latitude: '36.656858',
        longitude: '116.916358'
      },
      to: {
        latitude: '36.440819',
        longitude: '116.016219'
      },
      success: res => {
        console.info(res);
      }
    });

Be careful ： The interface here is to obtain the data of the planned route . If you want to show route planning , Please use Tencent map widget or polyline Decompress the coordinates .

polyline Decompress the coordinates , Show route to map Components ：

<map longitude="{
   {mapinfo.longitude}}"
latitude="{
   {mapinfo.latitude}}"
scale="12"
polyline="{
   {polyline}}"
show-location
 ></map>

    // Use maps , Route planning 
    var _this = this;
    map.direction({
      // mode: 'driving',
      from: {
        latitude: '36.656858',
        longitude: '116.916358'
      },
      to: {
        latitude: '36.440819',
        longitude: '116.016219'
      },
      success: res => {
        console.info(res);
        var coors = res.result.routes[0].polyline;
        var mapPolyline = [];
        // Decompress the coordinates （ The coordinates of the returned point string , Compression by forward differential ）
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        // Put the decompressed coordinates into the point string array pl in 
        for (var i = 0; i < coors.length; i += 2) {
          mapPolyline.push({
            latitude: coors[i],
            longitude: coors[i + 1]
          })
        }
        // console.info(mapPolyline);
        _this.setData({
          ['polyline']:[{
            points: mapPolyline,
            color: '#00ff00',
            width: 4
          }]
        });
      }
    });
    this.setData({
      mapinfo: {
        latitude: '36.656858',
        longitude: '116.916358'
      }
    });

Display the results ：

 

 

more ：

Use and arrangement of coordinate position interface of wechat applet ( One )

Wechat applet switch Style rewriting

Applet Image Component long press to identify supported codes