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 をよろしくお願いいたします。

以下もご興味があるかもしれません: