WeChatミニプログラムにナビゲーション機能を実装する方法

WeChatミニプログラムにナビゲーション機能を実装する方法

1. レンダリング

2. 操作手順

1. テンセントマップキーを申請する - 住所

2. ミニプログラムのバックグラウンドにTencentプラグインを追加する - 開発ドキュメント

3. ミニプログラムコード app.json 設定

プラグインを requirePlugin('routePlan') に設定します。
let key = ''; //Tencentの位置情報サービスで申請したキーを使用する
let referer = ''; //プラグインを呼び出すアプリの名前 let endPoint = JSON.stringify({ //エンドポイント 'name': '吉野家(北京西駅北口)',
 '緯度': 39.89631551,
 「経度」: 116.323459711
});
wx.navigateTo({
 url: 'plugin://routePlan/index?key=' + キー + '&referer=' + リファラー + '&endPoint=' + エンドポイント
});

または、アプレットに組み込まれたマップナビゲーションを使用することもできます。

アプレットの組み込みマップwx.getLocationとwx.openLocationを使用する

公式サイトリンク

//wxml
<button type="default" bindtap="openMap">地図を開く</button>
//js
ページ({
 データ: {

 },
 オープンマップ: 関数 () {
 wx.getLocation({
  type: 'gcj02', // デフォルトは wgs84 で GPS 座標を返し、gcj02 は wx.openLocation に使用できる座標を返します。成功: function (res) {
  // 成功
  コンソールにログ出力します。
  console.log(res.経度);
  wx.openLocation({
   latitude: res.latitude, // 緯度、範囲は -90~90、負の数は南緯を示します longitude: res.longitude, // 経度、範囲は -180~180、負の数は西経を示します scale: 28, // スケーリング比 name:"検索する場所の名前 (そのようなレストラン)",
   address: 「住所: 行く場所の詳細な説明」
  })
  }
 })
 }
})

要約する

WeChatミニプログラムにナビゲーションを実装する方法についての記事はこれで終わりです。WeChatミニプログラムのナビゲーション機能の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットにマップナビゲーション機能を実装する方法
  • WeChatアプレットカプセルボタンリターンの詳細な説明|ホームページカスタムナビゲーションバー機能
  • WeChatアプレットのカスタムナビゲーションの非表示と表示機能
  • ジャンプ機能を備えたWeChatアプレットのカスタムボトムナビゲーション
  • WeChatアプレットで実装されたナビゲーションバーのタイトル機能を動的に設定する例
  • WeChat アプレット MUI ナビゲーション バーの透明グラデーション機能の例 (不透明度を変更して)
  • WeChatミニプログラムシリーズ:カスタムトップナビゲーション機能
  • WeChat アプレット ナビゲーション バーのスライド配置機能の例 (CSS3 positionsticky 効果の実装)
  • レンダリング付きの完全なソースコードを実現するWeChatアプレットマップナビゲーション機能(推奨)
  • WeChatアプレットのスクロールビューは、左側のナビゲーションバーのアンカーポイントまでスクロールして食べ物を注文する機能を実現します(タイプをクリックしてアンカーポイントまでスクロールします)

<<:  Windows での MySQL データベースのマスター/スレーブ構成チュートリアル

>>:  単一の Nginx IP アドレスに複数の SSL 証明書を設定する例

推薦する

MySQLのタイムゾーンを表示および設定する方法

1. データベースのタイムゾーンを確認する '%time_zone' のような変数を...

vuex ベースのショッピングカート機能の実装

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

JS 矢印関数に適さないシナリオは何ですか?

目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...

時点に基づくMySQLクイックリカバリソリューション

なぜこのような記事を書いたかというと、数日前の夜、仕事が終わろうとしていたときに、業務側で突然、テー...

VMware に Centos7 をインストールした後に外部ネットワークに ping できない問題を解決する

クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...

JavaScript インタビュー: 配列の平坦化メソッドを実装する方法

目次1 配列のフラット化とは何ですか? 2 JS標準ライブラリの配列フラット化メソッド3 フラットメ...

UbuntuはSSHサービスのリモートログイン操作を開始します

ssh-secure シェルは、安全なリモート ログインを提供します。組み込みシステムを開発し、Li...

擬似分散グラフィックを実現するための VMware 構成 Hadoop チュートリアル

1. 実験環境シリアルナンバープロジェクトソフトウェアとバージョン1オペレーティング·システムCen...

LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています

概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

HTMLはテキスト行のインターセプトの実装原理とコードを超えています

複数行を超えるテキストをインターセプトするための HTML コードは次のとおりです。 HTML:コー...

jQueryはシンプルなボタンの色の変更を実装します

HTML と CSS で、ボタンの色を設定したいとします。 目的の効果は得られますが、プロセスはかな...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

25 個の CSS フレームワーク、ツール、ソフトウェア、テンプレートを共有

スプライトカウダウンロード CSS リントダウンロード プレフィックスダウンロード 1140px C...

Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...

Vue カードスタイルのクリックして切り替える画像コンポーネントの使用方法の詳細な説明

この記事では、vueカードスタイルのクリックして切り替える画像コンポーネントを参考までに紹介します。...