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 証明書を設定する例

推薦する

Vueはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機機能を実現するためのVueの具体的なコードを紹介します。具体的...

CSS コンテンツ属性を使用して、マウスホバープロンプト (ツールチップ) 効果を実現します。

なぜこのような効果を実現するのでしょうか。実は、この効果もタイトルプロンプトから派生したものですが、...

Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...

antd+reactプロジェクトをviteに移行するためのソリューションの詳細な説明

Antd+react+webpackは、多くの場合、Reactテクノロジースタックに基づくフロントエ...

VueとVueComponentの関係の詳細な説明

次のケースでは、これまでに学んだプロトタイプチェーンの知識ポイントを確認します。 // コンストラク...

mysql5.7 リモート アクセス設定

mysql5.7 でリモート アクセスを設定することは、ユーザーを作成して権限を付与するだけでアクセ...

DockerとDocker-Composeの使用例

Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテナ エンジンです...

Kubernetesでポッドを作成する方法

目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...

Alibaba Cloud Centos7.3 インストール mysql5.7.18 rpm インストール チュートリアル

MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...

MySQL をクリーンにアンインストールする方法 (テスト済みで効果的)

Mysql を完全にアンインストールするにはどうすればいいですか?以下の手順に従って実行してくださ...

MySQL 5.7.21 のインストールとパスワード設定のチュートリアル

MySQL5.7.21のインストールとパスワード設定のチュートリアルは次のとおりです。公式リファレン...

HTMLページ間でパラメータを渡すフロントエンド方式の詳細な説明

プロジェクトでよくある状況として、案件リストなどのリストが存在することがあります。リスト内の項目をク...

方言変換のためのApache Calciteコード

意味Calcite は、Sql を SqlNode に解析し、次に SqlNode を特定のデータベ...

Angularルーティングサブルートの詳細な説明

目次1. サブルート構文2. 例1. 2つの新しいコンポーネントを作成し、その内容を変更する2. ル...

Vueはページの部分的なリフレッシュを実装します(ルータビューのページリフレッシュ)

Vue でprovide+inject組み合わせを使用するまず、App.vue を変更する必要があ...