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

推薦する

ES6 ループと反復可能オブジェクトの例

この記事では、ES6 の for ... of ループについて説明します。古い方法以前は、JavaS...

jsのイベントオブジェクトを深く理解しましょう

JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...

ウェブページでコンテンツを引用するためによく使われるHTMLタグをマスターする

長い引用には blockquote を、短い引用には q を、参考文献には cite を使用します。...

Alibaba Cloud centos7にmysql8.0.22をインストールする詳細なチュートリアル

1. MySQLインストールパッケージをダウンロードするまず、https://dev.mysql.c...

Macでのファイル権限の表示と設定の詳細な説明

序文Mac システムのターミナルでファイルの権限を変更するには、Linux の chmod コマンド...

MySQLインストーラがコミュニティモードで実行されている場合の解決策

今日、リモートデスクトップを実行してログインしているときにこのプロンプトを見つけました「MySQL ...

すべてまたは逆の選択機能を実現するJavaScript

この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参...

Tomcat で複数の war パッケージを展開する方法と手順

1 背景JDK1.8-u181とTomcat8.5.53がインストールされました。インストール後、環...

Linux システムに Spring Boot アプリケーションをインストールするための詳細なチュートリアル

Unix/Linux サービスsystemd サービス操作プロセス1. JDKがインストールされたC...

LinuxベースのApacheウェブサイトサービス構成の詳細な説明

オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...

VueプロジェクトにPWAを導入する手順

目次1. 依存関係をインストールする2. vue.config.js ファイルで pwa を設定しま...

RR および RC 分離レベルでのインデックスとロックのテスト スクリプトのサンプル コード

基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...

Nginx がサーバーの生存状態をパッシブにチェックする詳細な説明

導入定期的にヘルスチェックを送信して、アップストリーム グループ内の HTTP サーバーのヘルスを監...

単一の MySQL テーブル内の行数が 500 万を超えてはいけないのはなぜですか?

今日は、興味深いトピックについてお話ししましょう。データベースとテーブルを分割することを検討する前に...

JavaScript でじゃんけんゲームを書く

この記事では、JavaScriptでじゃんけんゲームを書くための具体的なコードを参考までに紹介します...