Vue は Tencent Map を統合して API を実装します (デモ付き)

Vue は Tencent Map を統合して API を実装します (デモ付き)

執筆の背景

以前のプロジェクトではTencent Mapsを使用していましたが、かなり便利だと感じましたが、公式デモのほとんどはネイティブjsで比較的基本的なもので、多くの高度なAPIが分散していたため、開発者が見つけるのが困難でした。そこで、オンラインオープンソースフレームワークVue-adminと組み合わせてVueを使用して、公式のものを模倣し、すぐに使用できるデモコレクションを作成しました。プロジェクトをダウンロードすると、ログインインターフェースが表示されます。6文字を入力するだけです(削除するのが面倒なので、もう遅すぎます)

プロジェクトプレビュー

ここに画像の説明を挿入

このアドレスから直接コードを取得し、コピーして貼り付けることができます。

プロジェクトの説明

著者の時間が限られているため、これまでに整理されたモジュールは 4 つだけです (効果が良ければ、引き続き更新し、道教の友人全員が問題を提起することを歓迎し、問題を見つけたらすぐに解決します)。

  • 基本的なマップの紹介と表示モジュール
  • 3D/2D切り替えと効果比較
  • 位置情報サービスに関する基本的なAPIには、現在地の特定、初期位置の特定、中心点の特定、マウスクリックイベントの追加、地図テキストの表示と非表示の切り替えなどがあります。
  • マークの基本的な使用方法は、マークを追加し、マーク追加イベントを終了し、マーク ポイントをドラッグ可能にすることです。

事前準備

Tencent Maps開発者アカウントを登録するには、このリンクをクリックしてください。

注記

これはVueにTencent Mapsを統合したデモです
プロジェクトのindex.htmlに次のコンテンツを導入する必要があります。

 <script src="https://map.qq.com/api/gljs?v=1.exp&key=登録後に取得するキー値"></script>
 <script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
 <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=登録後に取得するキー値"></script>

次に、main.jsファイルに次のコード行を記述します。

Vue.prototype.$Map = window.TMap
Vue.prototype.$Location = new window.qq.maps.Geolocation('独自のキー', 'Tencent Map Template - ブログ表示')

もう一度、このリンクをクリックして Tencent Map 開発者アカウントを登録できることを思い出してください。

本書のこの時点で、ほとんどの読者はコピー&ペーストするだけで Tencent Maps を完璧に実行できるはずです。

以下は2021年1月16日の更新です

このサービスを呼び出すには、開発者アカウントを持ち、独自のキーを申請する必要があります。申請アドレスと具体的な使用方法は次のとおりです。
get メソッドによって呼び出されます:

{
rul:'http://localhost:9528/qq/ws/geocoder/v1/?location=lat,lng&key=あなたのキー&get_poi=1'}

位置逆解析にはいくつかの落とし穴があり、以下にリストします。

最初の大きな落とし穴はクロスドメインです。この問題を抱えているのは私だけかどうかはわかりません。プロジェクトをローカルで開始するときに逆解決アドレスを呼び出すと、クロスドメインの問題が報告されます。プログラムでクロスドメインコードを次のように構成する必要があります。vue.config.js でクロスドメインを構成する (cli の低いバージョンを持っている友人の場合は、自分でオンラインで解決策を検索してください。すでにかなり完成しているので、ここでは詳細には触れません)

開発サーバー: {
    ポート: ポート、
    オープン: 真、
    かぶせる:
      警告: 偽、
      エラー: true
    },
    proxy: { //クロスドメインを構成する '/qq': {
        target: 'https://apis.map.qq.com/', // ここでのバックグラウンド アドレスはシミュレートされています。実際のバックグラウンド インターフェイスを入力する必要があります ws: true,
        changOrigin: true, // クロスドメインを許可する pathRewrite: {
          '^/qq': '' // リクエスト時にこのAPIを使用する}}
    },

2番目の大きなピット認証エラー報告タイプは次のとおりです。

 	{
    「ステータス」: 110,
    "メッセージ": "リクエスト元は承認されていません。リクエスト元のドメイン名: localhost9528"
	}
 	{
    「ステータス」: 112,
    "メッセージ": "IP は承認されていません。現在の IP: 127.0.0.1"
	}
 {
    「ステータス」: 111,
    "メッセージ": "署名の検証に失敗しました"
  }

解決策は、図に示すように、テンセントの位置情報サービスプラットフォームを使用し、公式文書と組み合わせてキー管理を構成することです。

ここに画像の説明を挿入

詳細な API パラメータについては、公式ドキュメントを参照してください。

これで、Tencent Maps の Vue 統合による API 実装 (デモ付き) に関するこの記事は終了です。Tencent Maps の Vue 統合に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue は Gaode マップのサンプルコードを呼び出す
  • Amap とその UI コンポーネントを Vue プロジェクトに導入する方法
  • Vueがローカル画像を動的に読み込む問題を解決する
  • vueはAmapコンポーネントプロセス分析を使用します
  • VueでのAmap導入と軌跡描画の実装
  • Vueは座標に応じてポイントを特定するためにGaodeマップを使用します
  • Vue Baiduマッププラグインを使ってみる
  • vue+Amap でマップサイト選択コンポーネントを書く方法

<<:  Ubuntu システムに Theano と Keras をインストールする方法

>>:  mysql ステートメントを使用してユーザー権限を照会するプロセスの詳細な説明

推薦する

Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...

テーブル関連の配置とJavascript操作テーブル、tr、td

適切に機能するテーブル プロパティ設定:コードをコピーコードは次のとおりです。 <テーブル セ...

Vueライフサイクル機能の詳細な説明

目次ライフサイクル関数一般的なライフサイクルフックVue のインスタンス破棄について:要約するライフ...

MySQL が UNION を使用して 2 つのクエリを接続できない理由の詳細な説明

概要連合接続データセットキーワードは、2つのクエリ結果セットを1つに連結し、同一のレコードを除外する...

Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...

MySQL での Join の使用に関する詳細な説明

前の章では、1 つのテーブルからデータを読み取る方法を学習しました。これは比較的簡単ですが、実際のア...

Linux C ログ出力コード テンプレート サンプル コード

序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...

IDEA が Docker を統合してリモート展開を実現するための詳細な手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...

Centos8 システムの VMware インストール チュートリアル図 (中国語グラフィカル モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

SQL効率を分析する方法を説明する

Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...

Docker で Nginx イメージ サーバーを構築する方法

序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...

Windows 2019 アクティベーション チュートリアル (Office2019)

数日前、Server2019の正式版がリリースされたことを知り、面白半分でインストールしてみることに...

よく使用される入力テキストボックスの内容は自動的に垂直方向に中央揃えされ、クリックするとデフォルトのプロンプトテキストは空になります。

3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...

画像の下部の空白部分の問題を解決する

最近のプロジェクトに取り組んでいるとき、下の図に示すように、画像を参照すると常に下部に空白スペースが...