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