"api工厂" 使用手册

api接口开箱即用,云后台管理,助力前端,解放后端开发;

不懂编程也能独立开发应用,小步快跑,快速创业!

旨为更懂你!

地图Demo

前言


本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点:


《创建 HelloWorld 项目》

《使用 “apifm-wxapi” 快速开发小程序》


功能说明


  1. 知道坐标,可以查询该坐标的地址
  2. 给定两个坐标,可以计算两点之间的距离(公里 / km)


特别说明


本案例中,使用到了微信小程序的2个官方接口:


1wx.getLocation()
2wx.chooseLocation()


为了保护用户隐私,微信有规定,必须要告诉用户使用定位的业务用途,以便帮助用户决策是否要允许小程序读取 TA 的定位信息:


https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission


所以,根据微信小程序官方的说明,本案例在 app.json 文件中加入了使用场景说明:


1"permission": {
2    "scope.userLocation": {
3      "desc": "微信规定必须要说明定位用途"
4    }
5  }


wxml代码


1<button type="primary" bindtap="queryAddress"> 读取当前地址坐标并查询地址 </button>
2<button type="warn" bindtap="selAddress"> 选地址计算距离 </button>


js代码


 1const WXAPI = require('apifm-wxapi')
 2
 3Page({
 4
 5  data: {
 6    latitude: undefined,
 7    longitude: undefined
 8  },
 9  onLoad: function (options) {
10    
11  },
12  onShow: function () {
13
14  },
15  queryAddress(){ // 读取当前定位坐标
16    const _this = this
17    wx.getLocation({
18      type: 'wgs84',
19      success(res) {
20        console.log(res)
21        _this.setData(res)
22        _this.mapQQAddress(res)
23      }
24    })
25  },
26  mapQQAddress(e){ // 坐标查地址
27    const location = e.latitude + ',' + e.longitude
28    WXAPI.mapQQAddress(location, 1).then(res => {
29      console.log('地址查看:', res)
30      if (res.code == 0) {
31        wx.showModal({
32          title: '成功',
33          content: res.data.result.address,
34          showCancel: false
35        })
36      }
37    })
38  },
39  selAddress(){ // 选择一个地址,读取坐标后计算距离
40    const _this = this
41    if (!this.data.latitude || !this.data.longitude) {
42      wx.showToast({
43        title: '请先读取当前地址',
44        icon: 'none'
45      })
46      return
47    }
48    wx.chooseLocation({
49      success: (e) => {
50        console.log(e)
51        WXAPI.mapDistance(_this.data.latitude, _this.data.longitude, e.latitude, e.longitude).then(res => {
52          console.log(res)
53          if (res.code == 0) {
54            wx.showModal({
55              title: '成功',
56              content: '距离:' + res.data + '公里',
57              showCancel: false
58            })
59          }
60        })
61      }
62    })
63  }
64})


总结


本案例主要使用了 apifm-wxapi 的以下方法:


1WXAPI.mapDistance(lat1, lng1, lat2, lng2)
2WXAPI.mapQQAddress(location, coord_type)


coord_type 参数:

1 GPS坐标 2 sogou经纬度 3 baidu经纬度 4 mapbar经纬度 5 [默认]腾讯、google、高德坐标 6 sogou墨卡托


关于  apifm-wxapi 更多的使用方法:


《apifm-wxapi使用说明》


本案例Demo代码下载:


《apifm-wxapi使用Demo程序》


期待你的进步!

感谢!

Copyright © 杭州于芯科技有限公司

浙ICP备15041833号