[vue-baidu-map] Anso

need

Ansovue-baidu-map

Technical points

Vue Baidu Map

Global installation

Step 1: Installation

npm install vue-baidu-map --save

Step 2: Define in man.js

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

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

Step 3: Use in components 

<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>

Partial installation

Step 1: Installation

npm install vue-baidu-map --save

Step 2: Introduce it directly into the component.

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

Add global variables to eslintrc.js

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