Obtain the current location and plan the route through the mini program and directly jump to Tencent map + mini program for navigation

1. Mini Programs use built-in developer tools for route planning

1. Log in to the mini program on the WeChat public platform, select Settings -> Third Party Services -> Add Plug-in

As shown below

Insert picture description here

Check it to add. View details include basic details of the plug-in, development documents, and related issues.
Insert picture description here

Insert picture description here

Here we choose Tencent's location service route planning, there are many options, you can add as needed.

Step by step according to the access guide:

Insert picture description here

First add these configurations in app.json, permission is to ask for the current location, you must add it! ! Because it was not added, a lot of people couldn't get it at the beginning, showing that the GPS signal is weak, just add the inquiry button! The following plugins are added plugins, the first is route planning, and the second is to select the current location (this item is no longer demonstrated)

Insert picture description here

Add in the click event:

Insert picture description here

The key and referer need to go to the Tencent service official website to apply

Operate as shown below

Insert picture description here

After the application is successful, the first line I hide is referer, and the second line is key. Just write this information into your code.

The use of the jump function is explained in detail in the use document, I will not repeat it

Use document portal

The navigation method I use is from the current location to the end location, so the current location does not need to be passed in, just pass in the end location.

So far, we use the developer tools to debug

At this point, we will find that the page has two headers, which is what it looks like on the developer tools
Insert picture description here

We debugged it on the real machine and found that there are actually no two heads! The style is correct!

At this point, the route planning function we need is actually completed.

2. Jump directly to Tencent Map + Mini Program

As can be seen from the screenshot of the mobile phone above, we can only view the route, not real-time navigation. However, the project manager requires the navigation function, so we will find another way.

Need to add configuration to jump to other applets in app.json

Insert picture description here

The opening method is as follows:
Insert picture description here

It is more convenient to copy the code

let endPoint = JSON.stringify({
    
     //终点
      'name': data.address,
      'location': {
    
    
        'lat': data.latitude,
        'lng': data.longitude
      }
    })
    wx.navigateToMiniProgram({
    
    
      appId: 'wx7643d5f831302ab0', //要打开的小程序 appId
      path: 'pages/multiScheme/multiScheme?endLoc=' + endPoint, //打开的页面路径，如果为空则打开首页
      fail: function () {
    
    
        wx.showToast({
    
    
          icon: 'none',
          title: '打开失败，请重试'
        })
      }
    })

The name is the name of the place, and the other parameters are the latitude and longitude of the current coordinates. You must strictly follow this parameter rule, otherwise Tencent Maps+ will not be able to get the coordinates of your destination.

The following method is the native method of WeChat.

As for how I got the appId and navigation path of Tencent map + applet

Reference: Copy any WeChat applet page path

We open the developer tools:

Insert picture description here

The developer tools will not help you jump to other small programs, so we debug on the real machine:

Please see the Tencent Map applet will jump directly to the navigation page and get the name and coordinates of my destination, and the word navigation appears in the lower right corner. The function is complete! ! !