VueはBaidu Mapsを使用して都市の位置特定を実現

VueはBaidu Mapsを使用して都市の位置特定を実現

この記事では、参考までに、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • VueはAmapを使用して都市の位置特定を実現
  • vue+Amapは地図検索とクリック位置決め操作を実現します
  • Amap を使った vue プロジェクトの位置付けとキーワード検索機能のサンプルコード (落とし穴体験)
  • Vueは座標に応じてポイントを特定するためにGaodeマップを使用します
  • Vue Baidu Map + 位置の詳細な説明

<<:  MySQL の選択、挿入、更新バッチ操作ステートメントのコード例

>>:  Linux サーバーの状態を監視する方法

推薦する

VMware Workstation 仮想マシンのインストール操作方法

仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...

JavaScript オブジェクト指向クラス継承ケースの説明

1. オブジェクト指向のクラス継承これまでの章では、JavaScript のオブジェクト モデルがプ...

Webフロントエンド開発CSS関連チームコラボレーション

フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...

CSS (カスケーディング スタイル シート) の一般的な用語の概要

CSS を使用する場合は、DOCTYPE (ドキュメント タイプ定義) を記述することを忘れないでく...

Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル

最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...

Alibaba Cloud ホストが IP を使用して Web サイトにアクセスできない問題の解決策 (セキュリティ グループ ルールを構成することで解決)

Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...

Docker での MySQL 8.0.20 のインストールと設定のチュートリアル

Dockerは参考までにMySQLバージョン8.0.20をインストールします。具体的な内容は以下のと...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

Vueで親子コンポーネント通信を実装する方法

目次1. 親コンポーネントと子コンポーネントの関係2. 小道具3. $エミット4. $親V. 結論 ...

Dockerコンテナ監視とログ管理の実装プロセス分析

Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...

Docker stopはすべてのコンテナを停止/削除します

この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...

MySQL における SQL ページングクエリのいくつかの実装方法と利点と欠点

【SQL】SQLページングクエリの概要開発プロセスではページングが必要になることがよくあります。今日...

CocosCreator Huarongdaoデジタルパズルの詳しい説明

目次序文文章1. パネル2. 華容島ソリューション3. コード4. 注記序文華容路とは何ですか? 誰...

MySQL の隠し列の詳細表示

目次1. 主キーが存在する2. 主キーはないが、一意のインデックスが存在する3. 共同主キーまたは共...

Alibaba Cloud Centos7.X で外部にポートを開く方法

一言で言えば、大手メーカーからクラウド サーバーを購入する場合は、セキュリティ グループに移動して、...