WeChatミニプログラムをTencent Mapsに接続する2つの方法

WeChatミニプログラムをTencent Mapsに接続する2つの方法

最近、WeChat アプレットを作成しているのですが、いくつか問題が発生しました。インターネットでいろいろ検索しましたが、必要な答えは見つかりませんでした。

私はこのマップの問題に対処し、それが皆様のお役に立てばと願ってここにまとめました。

WeChatミニプログラムでTencent Mapsにアクセスする方法は2つあります。1つ目はTencent独自のマップを呼び出すこと、2つ目はプラグインma-routeを使用することです。

1. テンセント独自の地図を呼び出す

実装結果は次のとおりです。

これは非常にシンプルで、多くの人が使用しています。

呼び出す必要があるのは 2 つのマップ API だけです。

上の2つです。もちろん、openLocationを呼び出すときは、まず認証のためにgetLocationを呼び出す必要があります。

app.json 内の情報を次のように設定する必要があります。

マップにジャンプする必要があるページに次のメソッドを記述します。

クリック

Baidu Maps、Amap、その他のサードパーティ製ソフトウェアをポップアップ表示できます

上記が最初の方法です。

2. 2番目の方法

まず、WeChatアプレットを見つけます

プラグインマネージャーでプラグインを追加する

方向:

まずapp.jsonファイルで設定します

次に、そのディレクトリ内のmain.jsonファイルを設定します。

mpvueをベースに書いたので開発ドキュメントとは少し異なります

まず、リダイレクト先のページから宛先アドレスを取得し、次にgetLocationを使用して現在の位置座標を取得します。

コードは次のとおりです。

以下は2番目の方法です:成功後の効果画像

WeChatミニプログラムをTencent Mapsに接続する2つの方法についての記事はこれで終わりです。WeChatミニプログラムをTencent Mapsに接続する方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • WeChatアプレットTencent Map SDKが現在の住所を取得して分析
  • WeChatミニプログラムにおけるTencent Mapの表示偏差問題の解決
  • WeChatアプレットがBaiduの地図座標をTencentの地図座標に変換
  • WeChatアプレット+テンセントマップ開発で経路計画と描画を実現
  • WeChatミニプログラムでTencent Map SDKを使用する詳細な説明と実装手順

<<:  Typescriptを使用してWeChatミニプログラムを開発するための詳細な手順

>>:  Vue ページレンダリングにおけるキーの適用例チュートリアル

推薦する

YUM を使用して Linux (CentOS 7) に MySQL 5.7.18 をインストールする方法の詳細なチュートリアル

このプロジェクトでは MySQL を使用する必要があります。これまで Windows では常に確実に...

VUEは登録とログインの効果を実現します

この記事の例では、登録とログインの効果を実現するためのVUEの具体的なコードを紹介します。具体的な内...

レスポンシブなカードホバー効果を実現するための HTML+CSS

目次成し遂げる:要約:言うことはあまりありませんが、まずは効果を見てみましょう。 カードホバー、レス...

パフォーマンスの最適化を教える 52 個の SQL 文

1. クエリを最適化するには、テーブル全体のスキャンを避けてください。まず、where と orde...

MySQL インデックス プッシュダウンを 5 分で学ぶ

目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...

Webフロントエンドツール、Sublime Text 2の紹介

Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...

CSS の高さの崩壊問題の解決

1. 崩壊度が高いドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つ...

vue-router を遅延ロードする 3 つの方法のまとめ

遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...

ElementuiはデータをxlsxとExcelテーブルにエクスポートします

最近、Vue プロジェクトについて知り、ElementUI でデータを xlsx および Excel...

Dockerはプロセス操作を管理するためにSupervisorを使用する

Docker コンテナは、起動時に、たとえば ssh または apache デーモン サービスなどの...

リンクAの意味論、書き方、ベストプラクティス

リンク A のセマンティクス、ライティング スタイル、およびベスト プラクティス。私は JavaEy...

MySQL 5.7.17 のインストールと設定のグラフィックチュートリアル

MySQL の機能: MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレー...

フロントエンドの状態管理(パート 1)

目次1. フロントエンドの状態管理とは何ですか? 2. ヴュークス3. バス4. ウェブストレージ序...

Ubuntu 18.04 に Nvidia グラフィック カード ドライバーをインストールするチュートリアル (画像とテキスト付き)

0. 事前準備BIOS でセキュア ブートを無効にします。無効にしないと、サードパーティ ソースを...

MySQL トランザクション分離レベルと MVCC の詳細な説明

目次トランザクション分離レベル同時トランザクション実行中に発生した問題SQL標準の4つの分離レベルM...