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

推薦する

ウェブサイトアイコンを追加するにはどうすればいいですか?

最初のステップは、アイコン作成ソフトウェアを準備することです。まず、いわゆるアイコンは拡張子 .ic...

MySQL アカウント情報をエレガントにバックアップする方法

序文:最近、インスタンスの移行の問題に遭遇しました。データの移行後、データベースのユーザーと権限も移...

CSS3のwebkit-box-reflectを巧みに使用して、さまざまな動的効果を実現します。

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

ウェブサイトのユーザーエクスペリエンスデザイン(UE)

Google Reader で、JunChen が書いた「フロー理論と設計」というタイトルの投稿を見...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...

JavaScript で一意の ID を生成するいくつかの方法

考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...

Vueフロントエンドパッケージングの詳細なプロセス

目次1. パッケージ化コマンドを追加する2. パッケージ化されたコードを実行する3. パッケージ化し...

MySQLがデータの削除を推奨しない理由

目次序文InnoDB ストレージ アーキテクチャInnodb テーブルスペースインドストレージディス...

CocosCreator の新しいリソース管理システムの分析

目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...

ウェブ音楽プレーヤーを実現する js

この記事では、参考までに簡単なHTMLと音楽プレーヤーの制作コードを紹介します。具体的な内容は以下の...

MySQLでNULL値を判定する際の落とし穴事例

目次序文Mysql の case when 構文:事例実践:要約:序文今日、プログラムを開発している...

Web ページのスクロール バーが右側に設定されているのはなぜですか?

私たちが毎日使っているブラウザや Word 文書のスクロール バーはなぜ右側にあるのでしょうか。多く...

私が良いと思うクールなデザインサイトをいくつかまとめてみました。

ウェブサイトをデザインするにはインスピレーションが必要です。良いインスピレーションを得るには、より多...

Vue-Jest自動テストの基本構成の詳しい説明

目次インストール構成よくある間違い事前テスト作業依存関係の扱いインスタンスとDOMを生成する要約する...

ftp は SSH 経由で Linux にリモート接続します

まず Linux に ssh をインストールします。例として Centos を使用します。ポータル:...