vue used Baidu map vue-baidu-map

Original link: http://www.cnblogs.com/Mrrabbit/p/11098289.html

installation

npm install vue-baidu-map --save

 

Global registration

The one-time introduction of global registration of all components Baidu map component library. It should be introduced vue-baidu-map in the inlet file main.js

Vue from Import ' VUE ' 
Import from BaiduMap ' VUE-baidu-Map ' 

Vue.use (BaiduMap, { 
  // AK is the application platform Baidu map developer key See http://lbsyun.baidu.com/apiconsole / Key * / 
  AK: ' YOUR_APP_KEY ' 
})

Because it is global registration, so you can directly be used in any components:

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

 

Local registration

If there is a need to introduce on-demand component, you can select parts Sign Baidu map component, which will reduce the capacity of the size of the project package. Local registration  BaiduMap component must declare  ak property. All components are stored in a separate  vue-baidu-map/components folder, can be invoked as needed. Because not compiled ES module can not be run directly in most browsers, if the run occurred while introducing assembly error, please check webpack loader configuration, confirmation  include and  exclude options hit a component library.

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

 

I see the point of official documents

Reproduced in: https: //www.cnblogs.com/Mrrabbit/p/11098289.html