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

Vue global filter concepts, precautions and basic usage methods

Table of contents 1. The concept of filter 1. Cus...

Detailed explanation of the execution principle of MySQL kill command

Table of contents Kill instruction execution prin...

HTML Tutorial: HTML horizontal line segment

<br />This tag can display a horizontal line...

Detailed explanation of overflow:auto usage

Before starting the main text, I will introduce s...

A summary of some of the places where I spent time on TypeScript

Record some of the places where you spent time on...

How to view server hardware information in Linux

Hi, everyone; today is Double 12, have you done a...

CentOS uses expect to remotely execute scripts and commands in batches

Sometimes we may need to operate servers in batch...

vue3 custom directive details

Table of contents 1. Registering custom instructi...

The solution of html2canvas that pictures cannot be captured normally

question First, let me talk about the problem I e...

Mysql accidental deletion of data solution and kill statement principle

mysql accidentally deleted data Using the delete ...

A brief analysis of the count tracking of a request in nginx

First, let me explain the application method. The...

HTML table tag tutorial (17): table title vertical alignment attribute VALIGN

The table caption can be placed above or below th...

Solve the problem that the IP address obtained using nginx is 127.0.0.1

Get ip tool import lombok.extern.slf4j.Slf4j; imp...

JavaScript countdown to close ads

Using Javascript to implement countdown to close ...

How to use html css to control div or table to be fixed in a specified position

CSS CodeCopy content to clipboard .bottomTable{ b...