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 サーバーの状態を監視する方法

推薦する

データベース管理における 19 の MySQL 最適化方法

MySQL データベースを最適化すると、データベースの冗長性を削減できるだけでなく、データベースの実...

よくあるNginxの設定ミスの例

目次ルートの場所が見つかりませんオフバイスラッシュ安全でない変数の使用スクリプト名$uri を使用す...

JS ベースの Ajax 同時リクエスト制御を実装する方法

目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...

MySQL を使用した分散ロックの実装

導入分散システムでは、分散ロックは最も基本的なツール クラスです。たとえば、支払い機能を備えた 2 ...

Linux または Android でファイル システムを追加する属性インターフェイスを解析する方法

最初のもの: 1. 主要なヘッダーファイルを追加します。 #include <linux/of...

HTML テーブルタグについての簡単な説明

主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。 1) ...

JavaScriptは4桁のランダム検証コードの生成を実装します

この記事の例では、JavaScriptで4桁のランダムな検証コードを生成する具体的なコードを参考まで...

WeChatアプレットがシンプルな計算機機能を実装

WeChatアプレット:シンプルな計算機、参考までに、具体的な内容は次のとおりです。ミニプログラムに...

MySQL ピボットテーブルについての簡単な説明

次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...

MySQL 8の新機能ROLEの詳しい説明

MySQL ROLE はどのような問題を解決しますか?プロフェッショナルな資質を持ち、権限管理に細心...

Dockerで複数のSpringbootを実行するための詳細なチュートリアル

Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...

mysql8.0.21 のダウンロードとインストールに関する詳細なチュートリアル

公式ウェブサイトアドレス: https://www.mysql.com/インストールの提案: インス...

Windows 10 での MySQL 5.7.21 インストーラのインストール グラフィック チュートリアル

MySQLをインストールしてメモしておきます。うまくインストールできるか分かりませんが、試してみます...

nginx-naxsi ホワイトリストルールの詳細な説明

ホワイトリストルールの構文:基本ルール wl:ID [否定] [mz:[$URL:target_ur...

HTML でさまざまなスペースの特徴と表現を探る (推奨)

I. 概要HTML テンプレートを作成するときに、テキスト レイアウトの手段としてスペースが使用さ...