vue使用百度地圖vue-bmap-gl

需求；

為了使用百度地圖的3D控件及旋轉地圖功能，特此研究了vue-bmap-gl

一.安裝：

npm install vue-bmap-gl -D

二.main.js全局引入

import VueBMap from 'vue-bmap-gl'
import 'vue-bmap-gl/dist/style.css'

Vue.use(VueBMap)
VueBMap.initBMapApiLoader({
  // 百度的key
  ak: 'T9XgL5DpTmOQvL0SbN362KIzYpR52LYU', // 用自己的百度地圖ak
  // 百度 sdk 版本，默認為 1.0
  v: '1.0'
})

 

三.組件代碼如下：

<template>
  <div>
    <div id="container" />
    <div class="zlp-control">
      <el-button @click="big()">放大一級</el-button>
      <el-button @click="small()">縮小一級</el-button>
    </div>
  </div>
</template>
<script>
import { lazyBMapApiLoaderInstance } from 'vue-bmap-gl'

export default {
  data() {
    return {
      map: null,
      centerPoint: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 15,
      mapType: 'BMAP_EARTH_MAP'
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    small() {
      this.map.zoomOut()
    },
    big() {
      this.map.zoomIn()
    },
    NavigationControl3D() {
      // eslint-disable-next-line no-undef
      var navi3DCtrl = new BMapGL.NavigationControl3D() // 添加3D控件
      this.map.addControl(navi3DCtrl)
    },
    LocationControl() {
      // 創建定位控件
      // eslint-disable-next-line no-undef
      var locationControl = new BMapGL.LocationControl({
        // 控件的停靠位置（可選，默認左上角）
        // anchor: 'BMAP_ANCHOR_TOP_RIGHT',
        // 控件基於停靠位置的偏移量（可選）
        // eslint-disable-next-line no-undef
        // offset: new BMapGL.Size(20, 20)
      })
      // 將控件添加到地圖上
      this.map.addControl(locationControl)

      // 添加定位事件
      locationControl.addEventListener('locationSuccess', function(e) {
        var address = ''
        address += e.addressComponent.province
        address += e.addressComponent.city
        address += e.addressComponent.district
        address += e.addressComponent.street
        address += e.addressComponent.streetNumber
        alert('當前定位地址為：' + address)
      })
      locationControl.addEventListener('locationError', function(e) {
        alert(e.message)
      })
    },
    init() {
      lazyBMapApiLoaderInstance.load().then(() => {
        // eslint-disable-next-line no-undef
        const GL = BMapGL
        this.map = new GL.Map('container', {
          minZoom: 5,
          maxZoom: 20
        }) // 創建Map實例
        this.map.centerAndZoom(new GL.Point(this.centerPoint.lng, this.centerPoint.lat), this.zoom)
        this.map.enableScrollWheelZoom(true)
        this.map.setMapType(this.mapType)

        this.NavigationControl3D()
        this.LocationControl()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100vh;
}
.zlp-control {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 100;
}
</style>

四.效果如下：