In the last issue, we introduced the significance, use scenarios and use methods of “Tencent Video” small program plug-in in the article.

Today we will share with you an equally excellent small program plug-in – “Tencent map” plug-in, from the use of the scene to the use of methods, will make a detailed introduction.

What can Tencent map plug-in do?

As the name implies, “Tencent Map” plug-in is officially produced by Tencent Map, aiming to provide developers with simple route multi-plan planning services, which can display the route plan between designated locations in the plug-in, supporting the ability of driving, bus, walking route planning and ETA and other basic route information.

If you want to “Tencent Map +” small program to achieve the basic functions of the map, using “Tencent Map” plug-in is your best choice.

“Tencent map” plug-in use scenario

Scenario 1: Received a wedding invitation from the mini-program, but can’t find the address on the invitation? How to do?

If you are developing a small program for invitations, you will encounter the above scenario. In the traditional development mode, the introduction of complete map selection and route planning components, the development cost is very high, more developers choose to let users directly input text address display, as a compromise to reduce the development cost. Such a design is not clickable, not to mention the ability of route planning, users need to manually input to query the address and traffic route.

Users in the process of editing the invitation small program, set up a good wedding place in advance;

When wedding guests receive the invitation, they click on the location, and the Tencent Map plug-in can automatically generate accurate navigation routes based on their current location and destination coordinates.

Scenario 2: Meeting service helper — Know your route in advance

How participants should get from high-speed rail stations, airports and train stations to the conference site has long been a must-have part of any conference invitation. However, for a long time, such information is used to be released in pure text form, which is inconvenient to understand and difficult to remember in experience.

If the application can use “tencent map” plug-ins, the experience of this kind of scenario qualitative change will happen: the meeting organizers are placed in a small program in advance on the finish (such as: airport – convention center, high-speed – convention center), the participants received meeting invitation and then click the specified line, can see it in the map the plug-in to the precise route to attend.

Isn’t this a bit more intelligent than dry writing?

How to access “Tencent Map” plug-in?

Tencent Map has powerful functions, but it is very simple to use:

**1. Apply to use the plug-in. ** Find the name of the plug-in “Tencent Map” (latest version: 1.0.6, AppID: wx5BC2AC602A747594) in “Small program Management Background – Settings – Third-party Services – Plug-in Management” and apply for using it.

2. Modify the configuration file JSON after importing the plug-in code: 

{
  "usingComponents": {
    "map-route": "plugin://myPlugin/mapRoute"
  }}
Copy the code

3. Use the map plugin. Add the following tags to the corresponding WXML file:

<map-route route-info="{{routeInfo}}"></map-route>
Copy the code

4. Finally, according to the requirements, the incoming plug-in data is processed in THE JS file, including the starting point, the longitude and latitude and name of the end point, and the route calculation method, which is packaged in the routeInfo structure:

let plugin = requirePlugin("myPlugin")letRouteInfo = {startLat: 39.90469, // startLng: 116.40717, // startLongitude:"My place", // Start name: endLat: 39.94055, // End latitude :116.43207, // End longitude:Raffles Mall, // Destination name mandatory mode:"car"} Page({data: {routeInfo: routeInfo}})Copy the code

Parameter Description:

Starting point: If startName=” my location “or startName=”currentLocation” or startName=”currentLocation” is not specified, the plug-in will obtain the currentLocation as the starting location to initiate route calculation. If the starting point information is correctly specified, the input starting point information will be used to initiate route calculation.

End point: a mandatory parameter. If it is not passed correctly, the route calculation will not be initiated or the route calculation will fail.

Calculation method:

Mode: supports three road calculation modes: car, bus, and Walk. Do not pass the default launch drive calculate road.

Note: data is initialized in data, do not setData directly in onLoad, because onLoad directly setData, properties routeInfo observer: Function (newVal, oldVal), newVal cannot receive parameters, resulting in an error. Then, routeInfo can be updated by using the bind event setData to change the starting and ending parameters.

“Tencent map” plug-in using renderings

🔗 developers.weixin.qq.com/community/d…

Content from: Wechat open community “Small program · Small story” column

Author: Xiong Mingjun

Any questions, please head over to the wechat Open Community: developers.weixin.qq.com

To learn more about wechat mini program developers, please scan the code to follow the wechat public number – WeGeek