WeChat Mini Program Development: The whole process of map route planning, super detailed! ! ! (Including solutions to problems encountered)

Table of contents

Show results

Chapter 1 Preparation Stage

1.1 Use uniapp to build WeChat applet

1.2 Condition 1: appId (WeChat applet appId)

1.3 Condition 2: key (key applied for Tencent location service)

1.4 Condition 3: Plug-in appId (WeChat applet plug-in appId)

Chapter 2 Source Code

Chapter 3 Solutions to Problems Encountered

---

Show results

Chapter 1 Preparation Stage

1.1 Use uniapp to build WeChat applet

Use uniapp to develop WeChat applet project construction:uniapp project creation_Create uniapp project-CSDN blog

1.2 Condition 1: appId (WeChat applet appId)

How to obtain WeChat Mini Program appId:Zero Basic Introduction to WeChat Mini Program [Download, Installation and First Project Configuration of Mini Program]_WeChat Mini Program Project Download_❆VE❆ Blog-CSDN Blog

1.3 Condition 2: key (key applied for Tencent location service)

Tencent Map Series (1): Tencent Map Key Application and Initial Operation-CSDN Blog

1.4 Condition 3: Plug-in appId (WeChat applet plug-in appId)

• Pay attention to distinguish the id of 1.2, they are not the same id.

Tencent Map Series (2): Adding plug-ins to WeChat mini-programs (three methods) and obtaining plug-in AppId - CSDN Blog

Chapter 2 Source Code

<button @click="toMAp">去微信小程序插件路线规划导航</button>

toMap(){
    let plugin = requirePlugin('routePlan');
    let key = '腾讯位置服务申请的key';  //使用在腾讯位置服务申请的key
    let referer = '腾讯位置服务路线规划';   //调用插件的app的名称
    let endPoint = JSON.stringify({  //终点
        'name': '北京西站',
        'latitude': 39.894806,
        'longitude': 116.321592
	});
    uni.navigateTo({
        url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
	});
},

This part of the source code is relatively simple. The starting position is the current position obtained, and the end point is assigned by itself. As long as the three conditions are applied, you will definitely be fine if you follow the tutorial!

Chapter 3 Solutions to Problems Encountered

Tencent Map Series (3): Solving the Problem of WeChat Mini Program Reference Plugin-CSDN Blog