VUEは、Baiduの地図VUE-Baiduのマップを使用しました

オリジナルリンク： http://www.cnblogs.com/Mrrabbit/p/11098289.html

インストール

NPMインストールVUE-Baiduのマップ--save

 

グローバル登録

すべてのコンポーネントBaiduのマップコンポーネントライブラリのグローバル登録のワンタイム紹介。これは、入口ファイルmain.jsにVUE-Baiduのマップを導入すべきです

インポートからVueの' VUE ' 
BaiduMapからインポート' VUE-Baiduの-地図' 

Vue.use（BaiduMap、{ 
  // AKは、アプリケーションプラットフォームBaiduのマップの開発者キーが参照されhttp://lbsyun.baidu.com/apiconsole /キー* / 
  AK：' YOUR_APP_KEY ' 
}）

それは世界的な登録があるので、あなたは直接、任意のコンポーネントで使用することができますので。

< テンプレート> 
  < 百度マップクラス= "BM-ビュー" > 
  </ 百度マップ> 
</ テンプレート> 

< スタイル> 
.bmビュー{ 
  幅：100％ 。
  高さ：300ピクセル; 
} 
</ スタイル>

 

ローカル登録

オンデマンドのコンポーネントを導入する必要がある場合は、部品がプロジェクトパッケージの大きさの容量を削減しますBaiduのマップコンポーネントを、署名を選択することができます。ローカル登録  BaiduMap コンポーネントがなければなりません宣言  ak プロパティを。すべてのコンポーネントが別々に保存され  vue-baidu-map/components たフォルダ、必要に応じて、呼び出すことができます。コンパイルされていないESモジュールは、ほとんどのブラウザで直接実行することはできませんので、実行は、組立誤差を導入しながら、WebPACKのローダー設定を確認してください発生した場合、確認  include および  exclude オプションは、コンポーネントライブラリを打ちます。

< テンプレート> 
  < 百度マップクラス= "BM-ビュー" AK = "YOUR_APP_KEY" > 
  </ 百度マップ> 
</ テンプレート> 

< スクリプト> 
からインポートBaiduMap ' VUE-百度マップ/コンポーネント/マップ/ Map.vue 「
エクスポートデフォルト{ 
  コンポーネント：{ 
    BaiduMap 
  } 
} 
</ スクリプト> 

< スタイル> 
.bmビュー{ 
  幅：100％ 。
  高さ：
} 
</ スタイル>

 

私は、公式文書のポイントを参照してください

ます。https：//www.cnblogs.com/Mrrabbit/p/11098289.htmlで再現