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'});
    }
  }

コード図