【vue-baidu-map】安装

需求

安装vue-baidu-map

技术点

Vue Baidu Map

全局安装

第一步：安装

npm install vue-baidu-map --save

第二步：在man.js中定义

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'KEY'
})

第三步：在组件中使用 

<template>
  <baidu-map class="bm-view" @ready="ready"></baidu-map>
</template>
<script>
export default {
  data() {
    return {
      point:null,
      BMap: null,
      map: null
    }
  },
  methods:{
    ready({ BMap, map }) {
      this.point = new BMap.Point(113.27, 23.13); // 选择一个经纬度作为中心点
      map.centerAndZoom(this.point, 12); //设置地图中心点和缩放级别
      this.BMap=BMap
      this.map=map
    }
  }
</script>
<style>
.bm-view {
  width: 300px;
  height: 300px;
}
</style>

局部安装

第一步：安装

npm install vue-baidu-map --save

第二步：直接在组件中引入。

import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'; // 局部注册
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'; //定位
import BmMapType from 'vue-baidu-map/components/controls/MapType.vue'; //地图类型
import BmCityList from 'vue-baidu-map/components/controls/CityList.vue'; //城市列表
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'; //标记 点


export default {
 components: { BaiduMap, BmGeolocation, BmMapType, BmCityList, BmMarker },
 data () {
    return {
      center: { lng: 0, lat: 0 },  
      zoom: 3,　
      }
   }
}

BMap is not defined

eslintrc.js中添加全局变量

module.exports = {
  root: true,
  env: {
    node: true,
  },
  globals: {
    BMap: true,
    BMapGL: true,
    BMapLib: true,
  },
};