この記事では、参考までに、Baidu Mapsを使用して都市の位置特定を実現するVueの具体的なコードを紹介します。具体的な内容は次のとおりです。 Vue プロジェクト実行環境: Vue 2.0、Vue Cli 3.0 ステップ 1: Baidu Map Open Platform にログインし、[コンソール] ----> [アプリケーション管理] ----> [マイアプリケーション] でアプリケーションを作成します。 目的はakを取得することです ステップ2: publicフォルダのindex.htmlファイル Baidu Mapsをインポートしてakを追加する ステップ3:プロジェクトのルートディレクトリにvue.config.jsファイルを作成する vue.config.jsファイルがある場合は、次のコードを追加するだけです。 VueCli 3.0以降では、 vue.config.jsファイルはデフォルトでは作成されなくなりました。このファイルを使用する場合は、手動で作成する必要があります。 モジュール.エクスポート = { Webpack を構成する: { 外部: { 'BMap': 'BMap' // Baidu マップ設定} } } ステップ 4:次のステップは、特定のコードを実装することです。 次に、2 つの実装ソリューションを紹介します。 方法 1 (推奨): js ツール ファイルを個別にカプセル化してアドレスを取得します。 1. srcフォルダーの下に新しいutilフォルダーを作成し、util フォルダーに新しいgetUserLocation.jsファイルを作成します。 注: この util フォルダーには、場所関連のファイルgetUserLocation.jsだけでなく、独自のカプセル化されたツール js ファイルをすべて保存できます。 コードとスクリーンショットは次のとおりです。 // 現在の都市を取得する const getCurrentCityName = function() { 新しい Promise を返します ((resolve, reject) => { myCity を新しい BMap.LocalCity() にします。 myCity.get((結果) => { geoc = new BMap.Geocoder(); geoc.getLocation(result.center, (rs) => { // rsはすべての位置情報を保持しますが、ここでは都市と地区のみを取得します addComp = rs.addressComponents; とします。 結果 = addComp.city + addComp.district; 解決(結果); }); }, {enableHighAccuracy: true}); }); } デフォルトの getCurrentCityName をエクスポートします。 上記のファイルにカプセル化されたメソッドをコンポーネントに導入して呼び出す 方法1:ツールファイルをインポートする このページでは、 locationMsg属性を通じて位置情報を表示できます。例: 北京市豊台区 方法 2:コンポーネント内に直接配置します。 コンポーネント内で次のコードを直接使用して、コンポーネントを正常に見つけることができます。この方法は、方法 1 よりも時間がかかります。 コードとスクリーンショットは次のとおりです。 マウント() { // 位置情報を取得します this.getCity(); }, メソッド: { 都市を取得する() { const getLocation = new BMap.Geolocation(); var _this = これ; getLocation.getCurrentPosition((位置) => { // position はすべての位置データを保存します console.log(position); // ここで都市と州を取得します。let city = position.address.city; 州を position.address.province とします。 _this.locationMsg = 州 + 都市; }, () => { _this.locationMsg = '位置決めに失敗しました!'; }, {プロバイダー: 'baidu'}); } } コード図 注: ここでの _this は実際には不要で、これを直接使用できます。矢印関数を使用する前は、_this が使用されていました。その後、矢印関数に変更した後、_this に関連するコードは変更されませんでした。もちろん、上記のコード通りに書いても問題ありません。 予期しない事態が発生しない場合は、コンポーネントのlocationMsg属性を通じて位置情報を取得できます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL の選択、挿入、更新バッチ操作ステートメントのコード例
MySQL データベースを最適化すると、データベースの冗長性を削減できるだけでなく、データベースの実...
目次ルートの場所が見つかりませんオフバイスラッシュ安全でない変数の使用スクリプト名$uri を使用す...
目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...
導入分散システムでは、分散ロックは最も基本的なツール クラスです。たとえば、支払い機能を備えた 2 ...
最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...
主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。 1) ...
この記事の例では、JavaScriptで4桁のランダムな検証コードを生成する具体的なコードを参考まで...
WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...
次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...
MySQL ROLE はどのような問題を解決しますか?プロフェッショナルな資質を持ち、権限管理に細心...
Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...
公式ウェブサイトアドレス: https://www.mysql.com/インストールの提案: インス...
MySQLをインストールしてメモしておきます。うまくインストールできるか分かりませんが、試してみます...
ホワイトリストルールの構文:基本ルール wl:ID [否定] [mz:[$URL:target_ur...
I. 概要HTML テンプレートを作成するときに、テキスト レイアウトの手段としてスペースが使用さ...