微信の小さいプログラムの地図はデモDemo/座標は住所を調べて/2つの住所の距離を計算します

2831 ワード

前言
このチュートリアルでは、「apifm-wxapi」モジュールに基づいて、小さなプログラムの開発を迅速に実現するために、以下の知識点を理解する必要があります.
『HelloWorldプロジェクトの作成』『apifm-wxapiを使用したクイック開発ウィジェット』
機能の説明
  • は座標を知り、その座標のアドレス
  • を問い合わせることができる.
  • は2つの座標を与え、2点間の距離(km/km)
  • を計算することができる.
    特別説明
    この例では、WeChatウィジェットの2つの公式インタフェースを使用します.
    wx.getLocation()
    wx.chooseLocation()
    

    ユーザーのプライバシーを保護するために、微信はユーザーに位置決めの業務用途を使用することを教えなければならないことを規定しており、ユーザーがウィジェットがTAの位置決め情報を読み取ることを許可するかどうかを決定するのを助ける.
    https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission
    そこで、微信ウィジェットの公式の説明によると、このケースはapp.jsonファイルには、使用シーンの説明が追加されています.
    "permission": {
        "scope.userLocation": {
          "desc": "             "
        }
      }
    

    wxmlコード
    
    
    

    jsコード
    const WXAPI = require('apifm-wxapi')
    
    Page({
    
      data: {
        latitude: undefined,
        longitude: undefined
      },
      onLoad: function (options) {
        
      },
      onShow: function () {
    
      },
      queryAddress(){ //         
        const _this = this
        wx.getLocation({
          type: 'wgs84',
          success(res) {
            console.log(res)
            _this.setData(res)
            _this.mapQQAddress(res)
          }
        })
      },
      mapQQAddress(e){ //      
        const location = e.latitude + ',' + e.longitude
        WXAPI.mapQQAddress(location, 1).then(res => {
          console.log('    :', res)
          if (res.code == 0) {
            wx.showModal({
              title: '  ',
              content: res.data.result.address,
              showCancel: false
            })
          }
        })
      },
      selAddress(){ //       ,         
        const _this = this
        if (!this.data.latitude || !this.data.longitude) {
          wx.showToast({
            title: '        ',
            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: '  ',
                  content: '  :' + res.data + '  ',
                  showCancel: false
                })
              }
            })
          }
        })
      }
    })
    

    まとめ
    この例では、apifm-wxapiの次の方法を主に使用します.
    WXAPI.mapDistance(lat1, lng1, lat2, lng2)
    WXAPI.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プログラム』
    あなたの進歩を期待します!ありがとう!