Loading…

MapDemo

# Preface This tutorial is based on the "apifm-wxapi" module and teaches you how to quickly implement small program development, so you may need to understand the following knowledge points first: ["Creating HelloWorld Project"](https://www.yuque.com/apifm/doc/hezlrm) ["Use "apifm-wxapi" to quickly develop small programs"](https://www.yuque.com/apifm/doc/mdldsd) # Function description 1. If you know the coordinates, you can query the address of the coordinates 2. Given two coordinates, the distance between two points (km / km) can be calculated #Special instructions In this case, two official interfaces of WeChat Mini Program are used: ```plain wx.getLocation() wx.chooseLocation() ``` _In order to protect user privacy, WeChat has regulations that users must be informed of the business purpose of using positioning, so as to help users decide whether to allow mini programs to read TA’s positioning information:_ [https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission) Therefore, according to the official instructions of WeChat Mini Program, this case adds usage scenario description to the app.json file: ```plain "permission": { "scope.userLocation": { "desc": "WeChat stipulates that positioning purposes must be stated" } } ``` ## wxml code ```plain ``` ## js code ```plain const WXAPI = require('apifm-wxapi') Page({ data: { latitude: undefined, longitude: undefined }, onLoad: function (options) { }, onShow: function () { }, queryAddress(){ // Read the current positioning coordinates const _this = this wx.getLocation({ type: 'wgs84', success(res) { console.log(res) _this.setData(res) _this.mapQQAddress(res) } }) }, mapQQAddress(e){ // Coordinate search address const location = e.latitude + ',' + e.longitude WXAPI.mapQQAddress(location, 1).then(res => { console.log('Address view:', res) if (res.code == 0) { wx.showModal({ title: 'Success', content: res.data.result.address, showCancel: false }) } }) }, selAddress(){ // Select an address, read the coordinates and calculate the distance const _this = this if (!this.data.latitude || !this.data.longitude) { wx.showToast({ title: 'Please read the current address first', icon: 'none' }) return } wx.chooseLocation({ success: (e) => { console.log(e) WXAPI.mapDistance(_this.data.latitude, _this.data.longitude, e.latitude, e.longitude).then(res => { console.log(res) if (res.code == 0) { wx.showModal({ title: 'Success', content: 'Distance:' + res.data + 'Kilometers', showCancel: false }) } }) } }) } }) ``` # Summary This case mainly uses the following methods of apifm-wxapi: ```plain WXAPI.mapDistance(lat1, lng1, lat2, lng2) WXAPI.mapQQAddress(location, coord_type) ``` > coord_type parameter: > > 1 GPS coordinates 2 sogou longitude and latitude 3 baidu longitude and latitude 4 mapbar longitude and latitude 5 [Default] Tencent, google, Amap coordinates 6 sogou Mercator > _More usage methods about apifm-wxapi: _ ["apifm-wxapi Instructions for Use"](https://github.com/gooking/apifm-wxapi/blob/master/instructions.md) _Download the Demo code of this case: _ ["apifm-wxapi using Demo program"](https://github.com/gooking/apifm-wxapi-demo) Looking forward to your progress! grateful!