WeChatミニプログラムでのマップの正しい使用例

WeChatミニプログラムでのマップの正しい使用例

序文

今日は、私の弟(WeChat ミニプログラムの分野に携わっています)が仕事で遭遇した、特定の場所の周りの学校を選択するというシナリオをシェアします。とても便利そうなので、弟に皆さんとシェアするように頼みました。

今回は、WeChatアプレットで全国の学校と住所を選択する方法を共有したいと思います。調査後、ほとんどのウェブサイトでは、古い学校については全国の学校名を提供していることがわかりました。新しい学校や遠隔地にある学校は通常見つかりません。これは絶対にうまくいかないだろうと思い、より包括的なアプローチを探し続けました。最終的に、マップで提供されるサービスが提供する学校が最も包括的であることがわかりました。ここでは、Tencent Map のオープン インターフェースをサンプル デモンストレーションとして使用します。

1. 準備

Tencent Map Open Platform を読むと、WeChat Mini Programs が SDK をダウンロードして Tencent Maps を使用するための直接呼び出しインターフェースを提供できることがわかります。もちろん、URL リクエストを自分でカプセル化して独自のデータを返すこともできます。この例では両方を使用しています。SDK でカプセル化するときに特定のインターフェースが呼び出され、例では同じインターフェースが複数回呼び出されるため、頻繁なインターフェース呼び出しでエラーが発生するためです。

作業中は、学校情報を表示するためにYouzanチームのvantも使用するので、依存関係も事前にインストールする必要があります。具体的なインストール手順については、公式ウェブサイトをご覧ください。

2. 実際の戦闘

2.1 ミニプログラムの権限を設定する

まず最初に、ユーザーがミニプログラムに入るときに、ミニプログラムの位置情報の許可を有効にできるようにします。app.json ファイルに次のコードを追加する必要があります。

"許可": {
  "スコープ.userLocation": {
    "desc": "あなたの位置情報は、ミニプログラムの位置インターフェースの効果を表示するために使用されます"
  }
}

このフィールドを使用すると、ミニプログラムが測位システムを使用するときに、ミニプログラムに権限が与えられていないことが判明した場合、ユーザーにミニプログラムに権限を与えるように求められます。効果は次のとおりです。

2.2 カプセル化ツールの機能

2.2.1 グローバル関数と変数

アプリ

// グローバル変数 globalData: {
    ユーザー情報: null
  },
// グローバルインポートメソッド、サードパーティのパッケージを簡単にインポートできます require: ($url)=> require($url)

2.2.2 ツールの機能

ユーティリティ

//SDK コアクラスを導入します const QQMapWX = require('./qqmap-wx-jssdk.min.js');
//API コアクラスをインスタンス化します。let key = '';
qqmapsdk を実行します。
キー &&(qqmapsdk = 新しい QQMapWX({
  キー // 必須}));
モジュール.エクスポート = {
  qqmapsdk、
  鍵
}

ここではSDKを導入し、インスタンス化されたオブジェクトを直接渡しますが、ここではTencentのマップオープンインターフェースキーを与える必要があります。ここでは自分のキーを提供しません。キーは後で使用する必要があるため渡されます。独自のキーを公開しないようにするために、キーは開発中にバックエンド構成に保存されるのが一般的です。ここでは、デモンストレーションの便宜上、フロントエンドで処理します。

2.3 サイト選択ページにジャンプする前の処理

携帯電話の位置を特定するには、WeChat の権限を有効にするだけでなく、携帯電話の測位システムの権限も有効にする必要があります。したがって、この機能のユーザー エクスペリエンスを向上させるために、正式に測位を開始する前に、通常は一連の操作が必要です。ここでは、ボタンを使用してジャンプするだけです。

wxml

<表示>
	<van-btn bind:tap="gotoMap" type="info">地図へ移動</van-btn>
</ビュー>

まず、ボタンにクリック イベントを追加する必要があります。ここでは、さまざまなことを処理できます。次に、js コードを見てみましょう。

//必要なツール関数を導入します const app = getApp();
const {qqmapsdk} = app.require('utils/util');
ページ({
  /**
   * マップ開始位置 */
  // ボタンをクリックしてマップページに移動します gotoMap(){
     wx.showLoading({
       タイトル: 「マップページにリダイレクトしています」
     })
    // ジャンプする前に、ユーザーエクスペリエンスを向上させるためにいくつかのことを行う必要があります // 1. ユーザーが位置情報を有効にしているかどうかを確認し、有効になっていない場合はガイドします // 2. プログラムの位置情報の許可を確認し、有効になっていない場合はガイドします // 3. ジャンプを開始する前に、上記の 2 つのポイントを実行します wx.getLocation({
      成功(res){
        wx.navigateTo({
          URL: "/pages/map/index"
        })
      },
      失敗する{
        e && (e.errCode == 2 || e.errCode == 404) の場合 {
          wx.showModal({
            タイトル: 「ヒント」、
            内容:「位置情報の取得に失敗しました。携帯電話の「位置情報」がオンになっていないか確認してください。」
            表示キャンセル: false
          })
        } そうでない場合、(e && ((e.errMsg.indexOf('getLocation:fail auth deny') != -1) || (e.errMsg.indexOf('system permission denied') != -1))) {
          表示モーダル({
            タイトル: 「ヒント」、
            内容: 「位置情報を取得できませんでした。WeChatに位置情報の許可があるかどうかを確認してください」
            confirmText: "再取得",
            成功(res){
              res.confirm === trueの場合{
                設定を検出する()
              } そうでない場合(res.cancel == true){
                戻る;
              }
            }
          })
        } そうでない場合、e.errMsg.indexOf("頻繁") !== -1){
          wx.showModal({
            タイトル: 「ヒント」、
            内容: 「位置情報インターフェースが頻繁に呼び出されています。再度操作する前に 10 ~ 30 秒お待ちください。」
            表示キャンセル: false
          })
        }
      },
      完了(){
        wx.hideLoading()
      }
    })
    // WeChatの位置情報許可機能を有効にするガイドdetectSettings(){
      wx.getSetting({
        成功(res){
          if(res && (res.authSetting["scope.userLocation"] !== undefined && res.authSetting["scope.userLocation"] !== true)){
            wx.showModal({
              タイトル: 「ヒント」、
              内容:「ミニプログラムには位置情報の許可がありません。WeChat ミニプログラムの位置情報の許可を設定してください。」
              confirmText: "設定へ移動",
              成功(res){
                res.cancel == trueの場合{
                  戻る
                } そうでない場合 (res.confirm === true){
                  wx.openSetting({
                    成功(結果){
                      if(result && (result.authSetting["scope.userLocation"] !== undefined && result.authSetting["scope.userLocation"] ===true)){
                        wx.navigateTo({
                          URL: "/pages/map/index"
                        })
                      } それ以外 {
                        wx.navigateTo({
                          URL: "/pages/index/index"
                        })
                      }
                    },
                  })
                } 
              },
              失敗(){
                wx.navigateTo({
                  URL: "/pages/index/index"
                })
              }
            })
          } それ以外 {
            wx.navigateTo({
              URL: "/pages/map/index"
            })
          }
        },
        完了(){
          wx.hideLoading()
        }
      })
    }
   }
})

コードを読んだら、効果を見てみましょう。ここでは、ジャンプの条件が満たされていないことを強調します。効果は次の GIF に示されています。

上記の GIF は、未開封の携帯電話の測位システムを処理していません。この点では、このデモンストレーションは比較的単純で、プロンプトが表示されるだけで、後は何も起こりません。日常の開発では通常、他のより優れた処理方法があります。未開封の効果は次のとおりです。

2.4 ジャンプ後の処理

2.4.1 ページの初期化

前の手順の後、携帯電話の両方の権限が付与されていることを確認したので、マップサイト選択ページの処理を開始します。開始する前に、完成品が次のようにどのように見えるかを見てみましょう。

wxml

<!--pages/map/index.wxml-->
<view class="fixed top">
  <van-search bind:search="searchSchool" placeholder="学校名を入力してください" model:value="{{schoolName}}" />
  <view class="school-nav">
    <text class="left">近くの学校</text>
    <view class="right" bind:tap="changeCity">
      <van-icon name="location-o" />
      <text>{{city || "北京"}}</text>
    </ビュー>
  </ビュー>
</ビュー>
<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}}" />
  </ブロック>
  <view id="txt" class="btm">
    <text wx:if="{{options.length}}">{{count>0 ? "下にプルダウンして更新すると詳細が表示されます" : "すでに一番下まで到達しています"}}</text>
    <text class="no-data" wx:else>関連するデータは取得されませんでした。 。 。 </テキスト>
  </ビュー>
</ビュー>	

全体の枠組みは上記のwxmlの通りです。全てのデータが提供されると、上図のようになります。それでは、彼の論理的な実装について説明しましょう。

//必要なツール関数を導入します const app = getApp();
const {qqmapsdk,key} = app.require('utils/util');
// ライフサイクル関数を初期化する onLoad: function (options) {
  _this = これ;
  _this.init()
},

以下の関数はロード時だけでなく、その後も使用されます。渡されたパラメータを使用して区別します。読み込み中に呼び出された場合は、表示に使用されるユーザーの現在の位置を取得するためにのみ使用されます。アドレスが渡された場合は、アドレスの逆解決に使用されます。

// 住所を解析して現在の位置を取得する init(location){
  クエリを = {
    成功(res){
      コンソール.log(res)
      res.status === 0 の場合
        // コンソール.log(res.result.location)
        app.globalData.adInfo = res.result.ad_info;
        _this.setData({
          都市: res.result.ad_info.city,
          緯度: res.result.location.lat,
          lng:res.result.location.lng、
        })
        _this.qqSearch();
      } それ以外 {
        wx.showModal({
          タイトル: 「ヒント」
          content:res.message || "地理的な位置情報を取得できませんでした。",
          表示キャンセル: false
        })
      }
    },
    失敗する{
      コンソール.log(e)
    }
  }
  場所 && (query.location = 場所);
  qqmapsdk.reverseGeocoder(クエリ);
}

2.4.2 検索機能の実装

// 入力が都市の場合、学校は表示されず都市のみが表示されます searchSchool(e){
  // 入力または入力スペースなし if(e && (!e.detail || e.detail.trim() === '')){
    wx.showToast({
      タイトル:「有効な学校名を入力してください」
      アイコン: 'なし'、
      期間: 2000
    })
    戻る
  }
  _this.setData({
    オプション:[],
    カウント: -2
  })
  _this.qqSearch(e.detail);
},
qqSearch(名前){
  // 入力ボックスに学校名を入力します wx.showLoading({
    タイトル: 「情報の取得」
  })
  mks = [];
  数えてみましょう、
      境界 = `nearby(${_this.data.lat},${_this.data.lng},1000)`;
  検索(名前)
  関数検索(名前){
    定数opts = {
      キーワード: '大学', //検索キーワード page_size: 15,
      page_index: _this.data.pageIndex, // その他のキーを取得: key,
      境界
    };
    if(名前){
      opts.boundary = `region(${_this.data.city})`
      opts.keyword = 名前
    }
    // ここでの主な目的は、高頻度のインターフェース呼び出しによって発生するエラーを回避することです。そのため、関連情報を取得するには URL のみを使用できます wx.request({
      URL: "https://apis.map.qq.com/ws/place/v1/search",
      メソッド: "get",
      データ:{
        ...オプション
      },
      success: function (res) { //検索成功後のコールバック console.log(res)
        res.statusCode !== 200 || (res.data && res.data.status !== 0) の場合、戻り値:
        // 初期化とその他の状態 // 何回スライドすればもっと取得できるか計算します if (_this.data.count === -1 || _this.data.count === -2) {
          カウント = res.data.count && Math.floor(res.data.count/10);
        }それ以外 {
          カウント = --_this.data.count;
        }
        (i = 0 とします; i < res.data.data.length; i++) {
          mks.push({ // 返された結果を取得し、それをmks配列に格納します title: res.data.data[i].title,
            アドレス: res.data.data[i].address,
          })
        }
      },
      失敗: 関数 (e) {
        コンソール.log(e)
        wx.showToast({
          title: JSON.stringify(e) || "マップ情報の取得に失敗しました",
          アイコン: "なし",
          所要時間: 3000
        })
      },
      完了: 関数 (){
        タイムアウトを設定します(()=>{
          wx.hideLoading()
          mks.push(..._this.data.options);
          _this.setData({ //マップ上に検索結果を表示するためのマーカープロパティを設定するオプション: mks,
            カウント
          })
        },1000)
      }
    });
  }
},

2.4.3 下にスクロールして詳細を見る

// 一番下までスライドするライフサイクル関数 onReachBottom: function () {
  _this.data.pageIndex = +++_this.data.pageIndex;
  _this.data.count && _this.qqSearch();
},

2.4.4 データの送信

ここではデータの送信について詳しく説明しません。選択した場合は、プロンプトが表示されます。実際の開発では、通常、他の用途のためにデータをデータベースに保存する必要があります。

サブデータ(e){
  定数データ = e.target.dataset.chooseopt;
  //プロンプトをクリックする状況を処理します textif(!data) return;
  wx.showModal({
    タイトル: 「ヒント」、
    内容: `あなたの学校は[${data.title}]ですか? `、
    成功(res){
      // キャンセル if(res.cancel) {
        戻る;
      } そうでない場合 (res.confirm){
        // OK // バックエンドへの追加または変更のリクエスト。通常は詳細なアドレスが必要ですが、ここでは簡単なプロセスを示します。wx.showToast({
          タイトル: data.title,
          アイコン:「なし」
        })
      }
    },
    失敗(){
      wx.showToast({
        タイトル: 「失敗」、
        アイコン: 「エラー」
      })
    }
  })
}

2.4.5 都市を切り替える

都市を変更する(){
  _this.setData({
    オプション:[],
    カウント:-2,
    // シンプルな双方向データバインディング。schoolName を入力すると入力ボックスの内容をクリアします: ''
  })
  wx.chooseLocation({
    緯度:_this.data.lat,
    経度:_this.data.lng、
    成功(res){
      if(res.errMsg === "chooseLocation:ok"){
        // 選択した場所を取得し、逆アドレスで経度と緯度を解析します parsing_this.init(`${res.latitude},${res.longitude}`);
      }
    },
    // キャンセルボタンを押す fail(e){
      if(e.errMsg === "chooseLocation:fail キャンセル"){
        _this.init();
      }
    },
    完了(){
    }
  })
}

この時点で、WeChatミニプログラムの学校選択は完了しており、この実際の実践のロジックは段階的に実行されるため複雑ではありません。

要約する

WeChatミニプログラムでのマップの正しい使用に関するこの記事はこれで終わりです。WeChatミニプログラムでのマップの使用に関する関連コンテンツの詳細については、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットマップ配置の簡単な例
  • WeChatアプレットマップ(マップ)の例の詳細な説明
  • WeChatアプレットにマップナビゲーション機能を実装する方法
  • WeChatミニプログラムでTencent Map SDKを使用する詳細な説明と実装手順
  • WeChat ミニプログラム Amap SDK の詳細な説明と簡単な例 (ソースコードのダウンロード)
  • WeChatアプレットマップの詳細な説明と簡単な例
  • WeChatアプレット開発マップ実装チュートリアル
  • WeChatアプレット:現在地の緯度と経度を取得し、地図の詳細を表示します
  • WeChat ミニプログラムチュートリアル: ローカル画像アップロードの詳細な例 (leancloud)
  • WeChatアプレットのマップコンポーネントをクリックして経度と緯度を取得する方法

<<:  複数のドメイン名に対する Nginx リバース プロキシを使用した HTTP および HTTPS サービスの実装

>>:  Mongodb の GUID 表示の問題の詳細な分析

推薦する

Vueを使用して手書き署名機能を実装する

個人的な実装のスクリーンショット:インストール: npm インストール vue-esign --sa...

JavaScript 組み込みオブジェクトの概要

目次1. 組み込みオブジェクト2. 数学オブジェクト1. Mathオブジェクトの使用2. 指定された...

IDEA を使用して Tomcat を設定し、JSP ファイルを作成する方法

idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...

計算機機能を実現するjsバージョン

この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

Bootstrap 3.0 学習ノート グリッドシステムの原則

前の 2 つの記事の簡単な紹介を通じて、Bootstrap についての基礎的な理解が得られました。 ...

MySQL 入門 - 概念

1. それは何ですか? MySQL は最も人気のあるリレーショナル データベース管理システムです。W...

MySQL における in と exists の使い方と違いの紹介

まずコードを書いて (int i=0;i<1000;i++){ (int j=0;j<5...

js キャンバスはランダムなパーティクル効果を実現します

この記事の例では、参考のためにjsキャンバスランダムパーティクルエフェクトの具体的なコードを共有して...

SQL 最適化チュートリアル: IN クエリと RANGE クエリ

序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...

Mysql sql スロークエリ監視スクリプトコード例

1. my.cnfを変更する #全体的な効果としては、グローバルがオンになっている場合はテーブルとロ...

JavaScript の基礎におけるデータ型の詳細な説明

目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...

Linux でファイルの権限 (所有権) を変更する

Linux と Unix はマルチユーザー オペレーティング システムであるため、ファイルの権限と所...

MySQLチュートリアルではストアドプロシージャを徹底的に理解します

目次1. ストアドプロシージャに関連する概念2. ストアドプロシージャの使用1) ストアドプロシージ...

Node.js での組み込みモジュールとカスタムモジュールの実装

1. コモンズCommonjsはNode.jsのカスタムモジュールですCommonjs 仕様は、Ja...

GIFアニメーション効果を模倣した自動ビデオ再生を実現するWeChatアプレットの例

需要背景:ミニプログラムページに GIF ダイナミック画像を挿入しますが、GIF 画像は通常サイズが...