Examples of correct use of maps in WeChat mini programs

Preface
1. Preparation
2. Actual combat

2.1 Configure Mini Program Permissions
2.2 Encapsulation tool functions

2.2.1 Global functions and variables
2.2.2 Tool functions

2.3 Processing before jumping to the site selection page

2.4 Processing after jump

2.4.1 Page Initialization
2.4.2 Search Function Implementation
2.4.3 Scroll down to get more
2.4.4 Submit Data
2.4.5 Switch cities

Summarize

Preface

Today I am sharing a scenario that my younger brother (in the field of WeChat Mini Programs) encountered at work - selecting schools around a certain location. It seems very useful, so I asked him to share it with you.

This time I want to share the method of selecting a school and address in the whole country in the WeChat applet. After research, I found that most websites provide the names of schools across the country for older schools. Schools that are newer or located in remote areas are generally not found. Thinking that this would definitely not work, we continued to look for a more comprehensive approach. Eventually, we realized that the schools provided by the services provided in the map were the most comprehensive. Here, we use the open interface of Tencent Map as an example demonstration.

1. Preparation

By reading Tencent Map Open Platform, you can know that WeChat Mini Programs can download SDK to provide direct calling interfaces to use Tencent Maps. Of course, you can also encapsulate the URL request yourself and return your own data. This example uses both because certain interfaces will be called when encapsulating in the SDK, and the same interface will be called for multiple times in the example, which will cause errors in frequent interface calls.

During the process, I will also use the Youzan team's vant to display school information, so I also need to install the dependencies in advance. For specific installation steps, see the official website

2. Actual combat

2.1 Configure Mini Program Permissions

The first thing is to let users enable location permissions for our mini program when entering the mini program. We need to add the following code in the app.json file:

"permission": {
  "scope.userLocation": {
    "desc": "Your location information will be used to display the effect of the mini program location interface"
  }
}

With this field, when the mini program uses the positioning system, if it is found that the mini program has not been given permission, the user will be asked to give the permission to the mini program. The effect is as follows:

2.2 Encapsulation tool functions

2.2.1 Global functions and variables

app.js

// Global variable globalData: {
    userInfo: null
  },
// Global import method, easy to import third-party packages require: ($url)=> require($url)

2.2.2 Tool functions

util.js

//Introduce SDK core class const QQMapWX = require('./qqmap-wx-jssdk.min.js');
//Instantiate the API core class let key = '';
let qqmapsdk;
key &&(qqmapsdk = new QQMapWX({
  key // required}));
module.exports = {
  qqmapsdk,
  key
}

Here we introduce the SDK and pass the instantiated object directly, but here we need to give Tencent's map open interface key. I will not provide my key here. The key is passed out because we will need to use it later. In order not to expose our own key, the key is generally stored in the backend config during development. Here, for the convenience of demonstration, it is processed on the front end.

2.3 Processing before jumping to the site selection page

In order to locate the phone, not only does the WeChat permission need to be enabled, but our phone also needs to have a positioning system permission enabled. Therefore, before officially starting positioning, in order to provide a better user experience for this function, we usually require a series of operations. Here I simply use a button to jump.

wxml

<view>
	<van-btn bind:tap="gotoMap" type="info">Go to map</van-btn>
</view>

First we need to add a click event to the button, where we can handle a lot of things; next let's take a look at the js code!

//Introduce the required tool functions const app = getApp();
const {qqmapsdk} = app.require('utils/util');
Page({
  /**
   * Map start position */
  // Click the button to jump to the map page gotoMap(){
     wx.showLoading({
       title: "Redirecting to the map page"
     })
    // Before jumping, you need to do a few things to improve the user experience // 1. Verify whether the user has enabled location, if not, guide // 2. Verify the location permission of the program, if not, guide // 3. Do the above two points before you can start jumping wx.getLocation({
      success(res){
        wx.navigateTo({
          url: "/pages/map/index"
        })
      },
      fail(e){
        if (e && (e.errCode == 2 || e.errCode == 404)) {
          wx.showModal({
            title: "Tips",
            content: 'Failed to obtain location information, please check whether the "location information" of the mobile phone is not turned on',
            showCancel: false
          })
        } else if (e && ((e.errMsg.indexOf('getLocation:fail auth deny') != -1) || (e.errMsg.indexOf('system permission denied') != -1))) {
          showModal({
            title: "Tips",
            content: 'Failed to obtain location information, please check whether WeChat has location permission',
            confirmText: "Re-acquire",
            success(res){
              if(res.confirm === true){
                detectSettings()
              } else if(res.cancel == true){
                return;
              }
            }
          })
        } else if(e.errMsg.indexOf("frequent") !== -1){
          wx.showModal({
            title: "Tips",
            content: "The location information interface is called too frequently. Please wait 10-30 seconds before operating again.",
            showCancel: false
          })
        }
      },
      complete(){
        wx.hideLoading()
      }
    })
    // Guide to enable WeChat location permission function detectSettings(){
      wx.getSetting({
        success(res){
          if(res && (res.authSetting["scope.userLocation"] !== undefined && res.authSetting["scope.userLocation"] !==true)){
            wx.showModal({
              title: "Tips",
              content:"The mini program does not have location permission. Please go to set the location permission for the WeChat mini program.",
              confirmText: "Go to settings",
              success(res){
                if(res.cancel == true){
                  return
                } else if (res.confirm === true){
                  wx.openSetting({
                    success(result){
                      if(result && (result.authSetting["scope.userLocation"] !== undefined && result.authSetting["scope.userLocation"] ===true)){
                        wx.navigateTo({
                          url: "/pages/map/index"
                        })
                      } else {
                        wx.navigateTo({
                          url: "/pages/index/index"
                        })
                      }
                    },
                  })
                } 
              },
              fail(){
                wx.navigateTo({
                  url: "/pages/index/index"
                })
              }
            })
          } else {
            wx.navigateTo({
              url: "/pages/map/index"
            })
          }
        },
        complete(){
          wx.hideLoading()
        }
      })
    }
   }
})

After reading the code, let's take a look at the effect. Here we emphasize that the conditions for jumping are not met. The effect is shown in the following GIF:

The GIF above does not handle the unopened mobile phone positioning system. This demonstration is relatively simple in this regard, just a prompt and then nothing. There are usually other better processing methods in daily development. The effect of unopened is as follows:

2.4 Processing after jump

2.4.1 Page Initialization

After the previous step, we have confirmed that both permissions of the mobile phone have been given, so we start to process the map site selection page. Before we start, let's take a look at what the finished product looks like, as follows:

wxml

<!--pages/map/index.wxml-->
<view class="fixed top">
  <van-search bind:search="searchSchool" placeholder="Please enter the school name" model:value="{{schoolName}}" />
  <view class="school-nav">
    <text class="left">Nearby schools</text>
    <view class="right" bind:tap="changeCity">
      <van-icon name="location-o" />
      <text>{{city || "Beijing"}}</text>
    </view>
  </view>
</view>
<view class="addr-cell" bindtap="subData">
  <block wx:for="{{options}}" wx:key="index">
    <van-cell data-chooseOpt="{{item}}" title-width="70vw" title="{{item.title}}" value="" label="{{item.address}}" />
  </block>
  <view id="txt" class="btm">
    <text wx:if="{{options.length}}">{{count>0 ? "Pull down to refresh for more information" : "Already reached the bottom"}}</text>
    <text class="no-data" wx:else>No relevant data was obtained. . . </text>
  </view>
</view>

The overall framework is as shown in the wxml above. If all the data is provided, it will be as shown in the figure above. Then let me explain his logical implementation!

//Introduce the required tool functions const app = getApp();
const {qqmapsdk,key} = app.require('utils/util');
// Initialize life cycle function onLoad: function (options) {
  _this = this;
  _this.init()
},

The following functions are not only used when loading, but also later. I use the passed parameters to distinguish them. If it is called during loading, it is only used to obtain the user's current location, which is used for display; if an address is passed in, it will be used for address reverse resolution.

// Your address parsing and getting the current location init(location){
  let query = {
    success(res){
      console.log(res)
      if(res.status === 0) {
        // console.log(res.result.location)
        app.globalData.adInfo = res.result.ad_info;
        _this.setData({
          city: res.result.ad_info.city,
          lat: res.result.location.lat,
          lng:res.result.location.lng,
        })
        _this.qqSearch();
      } else {
        wx.showModal({
          title: 'Tips',
          content:res.message || "Failed to obtain geographic location information.",
          showCancel: false
        })
      }
    },
    fail(e){
      console.log(e)
    }
  }
  location && (query.location = location);
  qqmapsdk.reverseGeocoder(query);
}

2.4.2 Search Function Implementation

// If the input is a city, only the city will be displayed without showing the school searchSchool(e){
  // No input or input space if(e && (!e.detail || e.detail.trim() === '')){
    wx.showToast({
      title: "Please enter a valid school name",
      icon: 'none',
      duration: 2000
    })
    return
  }
  _this.setData({
    options:[],
    count: -2
  })
  _this.qqSearch(e.detail);
},
qqSearch(name){
  // Input the name of the school in the input box wx.showLoading({
    title: "Getting information"
  })
  const mks = [];
  let count,
      boundary = `nearby(${_this.data.lat},${_this.data.lng},1000)`;
  search(name)
  function search(name){
    const opts = {
      keyword: 'University', //Search keywords page_size: 15,
      page_index: _this.data.pageIndex, // Get more keys: key,
      boundary
    };
    if(name){
      opts.boundary = `region(${_this.data.city})`
      opts.keyword = name
    }
    // The main purpose here is to avoid errors caused by high-frequency interface calls, so only the URL can be used to obtain relevant information wx.request({
      url: "https://apis.map.qq.com/ws/place/v1/search",
      method: "get",
      data:{
        ...opts
      },
      success: function (res) { //Callback after successful search console.log(res)
        if(res.statusCode !== 200 || (res.data && res.data.status !== 0)) return;
        // Initialization and other states // Calculate how many times you can slide down to get more if (_this.data.count === -1 || _this.data.count === -2) {
          count = res.data.count && Math.floor(res.data.count/10);
        }else {
          count = --_this.data.count;
        }
        for (let i = 0; i < res.data.data.length; i++) {
          mks.push({ // Get the returned result and put it into the mks array title: res.data.data[i].title,
            address: res.data.data[i].address,
          })
        }
      },
      fail: function (e) {
        console.log(e)
        wx.showToast({
          title: JSON.stringify(e) || "Failed to obtain map information",
          icon: "none",
          duration: 3000
        })
      },
      complete: function (){
        setTimeout(()=>{
          wx.hideLoading()
          mks.push(..._this.data.options);
          _this.setData({ //Set the markers property to display the search results on the map options: mks,
            count
          })
        },1000)
      }
    });
  }
},

2.4.3 Scroll down to get more

// Slide down to the bottom life cycle function onReachBottom: function () {
  _this.data.pageIndex = ++_this.data.pageIndex;
  _this.data.count && _this.qqSearch();
},

2.4.4 Submit Data

We will not go into details about submitting data here. If you choose, you will be prompted. In actual development, you usually need to store the data in the database for other uses.

subData(e){
  const data = e.target.dataset.chooseopt;
  //Handle the situation of clicking the prompt textif(!data) return;
  wx.showModal({
    title: "Tips",
    content: `Is your school [${data.title}]? `,
    success(res){
      // Cancel if(res.cancel) {
        return;
      } else if (res.confirm){
        // OK // Request to add or modify to the backend, usually requires a detailed address, here is a simple process wx.showToast({
          title: data.title,
          icon: "none"
        })
      }
    },
    fail(){
      wx.showToast({
        title: "Failure",
        icon: "error"
      })
    }
  })
}

2.4.5 Switch cities

changeCity(){
  _this.setData({
    options:[],
    count:-2,
    // Simple two-way data binding, clear the content of the input box when entering schoolName: ''
  })
  wx.chooseLocation({
    latitude:_this.data.lat,
    longitude:_this.data.lng,
    success(res){
      if(res.errMsg === "chooseLocation:ok"){
        // Get the selected location and parse the longitude and latitude by inverse address parsing_this.init(`${res.latitude},${res.longitude}`);
      }
    },
    // Press the cancel button fail(e){
      if(e.errMsg === "chooseLocation:fail cancel"){
        _this.init();
      }
    },
    complete(){
    }
  })
}

At this point, the school selection of the WeChat mini program has been completed. The logic of this actual practice is not complicated as it is implemented step by step.

Summarize

This is the end of this article about the correct use of maps in WeChat mini-programs. For more relevant content on the use of maps in WeChat mini-programs, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

WeChat applet map positioning simple example
WeChat applet map (map) example detailed explanation
How to implement map navigation function in WeChat applet
Detailed explanation and implementation steps of using Tencent Map SDK in WeChat Mini Program
WeChat Mini Program Amap SDK Detailed Explanation and Simple Examples (Source Code Download)
WeChat applet map detailed explanation and simple example
WeChat applet development map implementation tutorial
WeChat applet: Get the current location latitude and longitude and map display details
WeChat Mini Program Tutorial: Detailed Example of Local Image Upload (leancloud)
How to get longitude and latitude by clicking on the WeChat applet map component

<<: Implementation of HTTP and HTTPS services with Nginx reverse proxy for multiple domain names

>>: Detailed analysis of GUID display issues in Mongodb