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 ページレンダリングにおけるキーの適用例チュートリアル

推薦する

Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項

1つのポートの変更バージョン 3.2.0 では、ネームノード ページ ポートは 9870、データノー...

docker-compose を使用して MySQL を実行する方法

ディレクトリ構造 。 │ .env │ docker-compose.yml │ └─mysql ├...

DockerはElasticsearch7.6クラスタをインストールし、パスワードを設定します

Elasticsearch 6.8 以降、無料ユーザーは X-Pack のセキュリティ機能を使用でき...

Linux での MySQL の文字化け問題の解決方法

プロジェクトはサーバーと対話し、post を通じてサーバー側の jsp にアクセスし、jsp はサー...

Node.js の fs モジュールと Path モジュールのメソッドの詳細な説明

概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...

データベース接続のURLの詳細な説明と概要

データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...

vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...

MySQL 5.7 のパフォーマンスと sys スキーマの監視パラメータの説明 (推奨)

1. パフォーマンス スキーマ: はじめにMySQL 5.7 では、多数の新しい監視項目の導入、ス...

Tomcat8はcronologを使用してCatalina.Outログを分割します

背景tomcat によって生成された catalina.out ログ ファイルが分割されていない場合...

Reactでのイベントバインディングの実装は3つの方法を指しています

1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...

JavaScript 操作要素の例

操作要素の詳細については、前回の記事を参照してください。JavaScript WebAPI、DOM、...

CocosCreator で物理エンジン ジョイントを使用する方法

目次マウスジョイント マウスジョイント距離ジョイント距離ジョイントモータージョイント直動ジョイント変...

Centos7 で yum を使用して Ceph 分散ストレージをインストールするチュートリアル

目次序文yumソース、epelソースを設定するCephソースの設定Cephとそのコンポーネントをイン...

カタツムリ映画システムのDocker展開の詳細なプロセス分析

環境に関する声明ホストOS: Cetnos7.9 最小インストールdocker バージョン: 20....

docker run後にコンテナがExited (0)と表示される問題を解決する

Centos7 上で openresty 用の Dockerfile を作成し、ビルドしました。 d...