執筆の背景以前のプロジェクトではTencent Mapsを使用していましたが、かなり便利だと感じましたが、公式デモのほとんどはネイティブjsで比較的基本的なもので、多くの高度なAPIが分散していたため、開発者が見つけるのが困難でした。そこで、オンラインオープンソースフレームワークVue-adminと組み合わせてVueを使用して、公式のものを模倣し、すぐに使用できるデモコレクションを作成しました。プロジェクトをダウンロードすると、ログインインターフェースが表示されます。6文字を入力するだけです(削除するのが面倒なので、もう遅すぎます) プロジェクトプレビュー このアドレスから直接コードを取得し、コピーして貼り付けることができます。 プロジェクトの説明著者の時間が限られているため、これまでに整理されたモジュールは 4 つだけです (効果が良ければ、引き続き更新し、道教の友人全員が問題を提起することを歓迎し、問題を見つけたらすぐに解決します)。
事前準備Tencent Maps開発者アカウントを登録するには、このリンクをクリックしてください。 注記これはVueにTencent Mapsを統合したデモです <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日の更新です このサービスを呼び出すには、開発者アカウントを持ち、独自のキーを申請する必要があります。申請アドレスと具体的な使用方法は次のとおりです。 { 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu システムに Theano と Keras をインストールする方法
>>: mysql ステートメントを使用してユーザー権限を照会するプロセスの詳細な説明
導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...
適切に機能するテーブル プロパティ設定:コードをコピーコードは次のとおりです。 <テーブル セ...
<!DOCTYPE html> <html lang="ja"...
目次ライフサイクル関数一般的なライフサイクルフックVue のインスタンス破棄について:要約するライフ...
概要連合接続データセットキーワードは、2つのクエリ結果セットを1つに連結し、同一のレコードを除外する...
目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...
前の章では、1 つのテーブルからデータを読み取る方法を学習しました。これは比較的簡単ですが、実際のア...
序文この記事は主に Linux C でのログ出力コード テンプレートに関する関連コンテンツを紹介し、...
1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...
目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...
Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...
序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...
数日前、Server2019の正式版がリリースされたことを知り、面白半分でインストールしてみることに...
3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...
最近のプロジェクトに取り組んでいるとき、下の図に示すように、画像を参照すると常に下部に空白スペースが...