How to implement navigation function in WeChat Mini Program

How to implement navigation function in WeChat Mini Program

1. Rendering

2. Operation steps

1. Apply for Tencent Map key——Address

2. Add Tencent plug-in to the mini program background - development document

3. Mini Program Code app.json Settings

let plugin = requirePlugin('routePlan');
let key = ''; //Use the key applied for in Tencent location service
let referer = ''; //The name of the app that calls the plugin let endPoint = JSON.stringify({ //End point 'name': 'Yoshinoya (Beijing West Railway Station North Exit)',
 'latitude': 39.89631551,
 'longitude': 116.323459711
});
wx.navigateTo({
 url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

Or you can also use the built-in map navigation of the applet

Use the applet built-in map wx.getLocation and wx.openLocation

Official website link

//wxml
<button type="default" bindtap="openMap">Open map</button>
//js
Page({
 data: {

 },
 openMap: function () {
 wx.getLocation({
  type: 'gcj02', // default is wgs84 returns gps coordinates, gcj02 returns coordinates that can be used for wx.openLocation success: function (res) {
  // success
  console.log(res.latitude);
  console.log(res.longitude);
  wx.openLocation({
   latitude: res.latitude, // Latitude, range is -90~90, negative number indicates south latitude longitude: res.longitude, // Longitude, range is -180~180, negative number indicates west longitude scale: 28, // Scaling ratio name:"Name of the place to be found (such and such restaurant)",
   address: "Address: Detailed description of the place to go"
  })
  }
 })
 }
})

Summarize

This is the end of this article about how to implement navigation in WeChat Mini Programs. For more information about the navigation function in WeChat Mini Programs, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to implement map navigation function in WeChat applet
  • Detailed explanation of WeChat applet capsule button return | home page custom navigation bar function
  • WeChat applet custom navigation hide and show function
  • WeChat applet custom bottom navigation with jump function
  • Example of dynamically setting the navigation bar title function implemented by WeChat applet
  • WeChat applet MUI navigation bar transparent gradient function example (by changing opacity)
  • WeChat Mini Program Series: Custom Top Navigation Function
  • WeChat applet navigation bar sliding positioning function example (implementing CSS3 positionsticky effect)
  • WeChat applet map navigation function to achieve complete source code with renderings (recommended)
  • WeChat applet scroll-view realizes the function of scrolling to the anchor point on the left navigation bar to order food (click on the type and scroll to the anchor point)

<<:  MySQL database master-slave configuration tutorial under Windows

>>:  Example of configuring multiple SSL certificates for a single Nginx IP address

Recommend

Box-shadow and drop-shadow to achieve irregular projection example code

When we want to add a shadow to a rectangle or ot...

How to notify users of crontab execution results by email

symptom I set a crontab task on a centos7 host, b...

Detailed explanation of the platform bus of Linux driver

Table of contents 1. Introduction to platform bus...

Solve the problem of spring boot + jar packaging deployment tomcat 404 error

1. Spring boot does not support jsp jar package, ...

Detailed explanation of the use of find_in_set() function in MySQL

First, let’s take an example: There is a type fie...

Summary of several replication methods for MySQL master-slave replication

Asynchronous replication MySQL replication is asy...

Why do select @@session.tx_read_only appear in DB in large quantities?

Find the problem When retrieving the top SQL stat...

Java programming to write a JavaScript super practical table plug-in

Table of contents Effects Documentation first ste...

Detailed explanation of basic management of KVM virtualization in CentOS7

1. Install kvm virtualization : : : : : : : : : :...

CSS implements five common 2D transformations

2D transformations in CSS allow us to perform som...

Vue implementation example using Google Recaptcha verification

In our recent project, we need to use Google robo...

Practical record of Vue3 combined with TypeScript project development

Table of contents Overview 1. Compositon API 1. W...

Analyze the working principle of Tomcat

SpringBoot is like a giant python, slowly winding...

About the "occupational disease" of designers

I always feel that designers are the most sensiti...