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

推薦する

Nginx で複数のドメイン名がドメインをまたいでアクセスできるようにマップを使用する方法

一般的なNginx構成ではクロスドメインが可能 サーバー{ 11111 を聞いてください。 serv...

Vue.jsは音楽プレーヤーを実装します

この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...

MySQLデータベースのマスタースレーブレプリケーションの原理と機能の分析

目次1. データベースのマスター/スレーブ分類: 2. MySQL マスタースレーブの紹介3. マス...

docker-compose でデプロイしたときに MySQL にアクセスできなくなる問題の簡単な分析

Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...

MySQL マスタースレーブレプリケーションの実践の詳細説明 - GTID ベースのレプリケーション

GTIDベースのレプリケーション導入GTID ベースのレプリケーションは、MySQL 5.6 以降に...

Vue は、デスクトップから Web ページにファイルをドラッグするためのサンプル コードを実装します (画像/オーディオ/ビデオを表示できます)

効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...

GDBデバッグMySQL実戦ソースコードコンパイルとインストール

ソースコードをダウンロード git クローン https://github.com/mysql/my...

JavaScript+html はフロントエンドページでランダム QR コード検証を実装します

クールなフロントエンドページのランダムQRコード検証を参考までに共有します。具体的な内容は次のとおり...

インストールされていないバージョンの MySQL を使用する手順とパスワードを忘れた場合の解決策

最初のステップは、圧縮されたパッケージを対応するディスクに解凍することです。 2 番目の手順は、cm...

CSSブロッキングマージとその他の効果についての簡単な説明

非直交マージンマージンを使用するとマージが発生します次のプロパティはマージンの結合を防止します。国境...

CSSの記述形式、モバイルページの基本構造の詳細な説明

1. CSSの記述形式1. インラインスタイルCSSコードを開始タグに直接記述することができます&l...

Mysql インデックスと Redis ジャンプテーブルについての簡単な説明

まとめインタビュー中、MySQL インデックスの問題について議論しているときに、B+ ツリー、B ツ...

ElementUIはカスケードセレクタを実装します

この記事の例では、カスケードセレクターを実装するためのelementUIの具体的なコードを参考までに...

Dockerコンテナを作成、起動、停止する方法

1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...

30分でReact Hooksを包括的に理解できます

目次概要1. 使用状態1.1 3つの概念に関する質問1.2 例1.3 注記2. リデューサーを使用す...