この記事では、参考までに、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 の選択、挿入、更新バッチ操作ステートメントのコード例
仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...
1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...
フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...
CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...
最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...
Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...
Dockerは参考までにMySQLバージョン8.0.20をインストールします。具体的な内容は以下のと...
次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...
目次1. 親コンポーネントと子コンポーネントの関係2. 小道具3. $エミット4. $親V. 結論 ...
Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...
この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...
【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...
目次序文文章1. パネル2. 華容島ソリューション3. コード4. 注記序文華容路とは何ですか? 誰...
目次1. 主キーが存在する2. 主キーはないが、一意のインデックスが存在する3. 共同主キーまたは共...
一言で言えば、大手メーカーからクラウド サーバーを購入する場合は、セキュリティ グループに移動して、...