Vue2項(xiàng)目中對百度地圖的封裝使用詳解

更新時(shí)間：2022年06月16日 11:10:24 作者：liyoro

近期項(xiàng)目需求相關(guān)地圖限定使用百度地圖,功能比較簡單,下面這篇文章主要給大家介紹了關(guān)于Vue2項(xiàng)目中對百度地圖的封裝使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

需求

組件按需引入。個(gè)人喜歡代碼干干凈凈，只要項(xiàng)目需要的功能就行了
簡單的封裝下，方便直接按官方文檔使用需要的功能，方便復(fù)用
基于Vue2 、JavaScript API v3.0
基于項(xiàng)目需求封裝，有些東西沒弄，需要的自己DIY吧

知識(shí)點(diǎn)

Vue插槽 slot，方便在地圖上使用各種百度地圖功能
Vue通知 emit、on。為了傳參，主要是獲取地圖map對象
Vue組件封裝，加載地圖后，各種地圖功能，如：打點(diǎn)、劃線、彈窗等一系列的封裝使用
百度地圖自定義彈窗的實(shí)現(xiàn)；彈窗調(diào)用vue內(nèi)部方法的實(shí)現(xiàn)

實(shí)現(xiàn)

components – bmap – index.vue

地圖單文件組件，主要代碼如下，具體參考代碼

<template>
  <div class="bmap-view">
    <div id="bmapcontainer" :style="{ height: mapHeight }" />
    <slot />
  </div>
</template>

<script>
import indexjs from './index.js'
export default {
  ...indexjs
}
</script>

<style lang='scss' scoped>
</style>

components - bmap - bmap-jsapi-loader - index.js

百度地圖異步加載的處理文件，具體看代碼

components – map – index.js

地圖組件的業(yè)務(wù)代碼，可以配置地圖開放的屬性props和監(jiān)聽事件。

例如這里，開放了ak(申請的百度地圖key)，styleId(百度地圖樣式id)，zoom(縮放值)，center(地圖加載默認(rèn)中心點(diǎn))，height(地圖默認(rèn)高度值)

主要代碼如下，具體參考代碼

import BMapLoader from './bmap-jsapi-loader'

export default {
  name: 'BmapView',
  props: {
    ak: {
      type: String,
      default: 'ZMVYYKDUVYZIHl5ygAaKyBhs7Gkg24SX'
    },
    styleId: {
      type: String,
      default: '41d153e7e9e7bcda9541996853046c93'
    },
    zoom: {
      type: Number,
      default: 15
    },
    center: {
      type: [Array, String],
      default() {
        return [113.22682, 23.410167]
      }
    },
    height: {
      type: Number | String,
      default: 520
    }

  },
  computed: {
    mapHeight() {
      return isNaN(this.height) ? this.height : `${this.height}px`
    }
  },
  data() {
    return {
      map: ''
    }
  },
  beforeDestroy() {
    this.map = null
  },
  mounted() {
  },
  created() {
    this.initMap()
  },
  methods: {
    initMap() {
      BMapLoader.load({
        key: this.ak,
        version: '3.0'
      }).then((BMap) => {
        this.map = new BMap.Map('bmapcontainer', {
          enableBizAuthLogo: false
        })
        const point = new BMap.Point(this.center[0], this.center[1])
        this.map.centerAndZoom(point, this.zoom)
        this.map.setMapStyleV2({
          styleId: this.styleId
        })

        this.$emit('bmap-ready', this.map)
      }).catch(e => {
        console.log(e)
      })
    }

  },
  watch: {}
}

以上是使用百度地圖的基礎(chǔ)

調(diào)用方式

views - bmapTest - index.js

components: {
  BmapView: () => import ('@/components/bmap/index.vue')
}

views - bmapTest - index.vue

<bmap-view />

效果圖

打點(diǎn)控件封裝

參考文檔 jsapi_reference_3_0

具體去看 bMarker.vue 文件了，去除百度地圖的默認(rèn)彈窗樣式，真的太惡心了。這里主要值得參考的是自定義彈窗時(shí)，html里面通過vue的 runtimeCompiler: true運(yùn)行時(shí)編譯功能，可以調(diào)用vue里面的參數(shù)和方法，這里對于自定義是很方便的。

效果圖

代碼總覽

涉及的文件如下（具體參考代碼）：

|-- public
   |-- images // 注意，地圖需要到的圖片放這里
|-- src
|-- components
|-- bmap
   |-- bmap-jsapi-loader
       |-- index.js
|-- bMarker.vue // 打點(diǎn)、彈窗控件封裝
|-- index.vue // 地圖單文件組件，供界面調(diào)用
|-- index.js // 地圖初始化、配置相關(guān)
|-- views
|-- bmapTest // 演示實(shí)例所在
|-- index.vue
|-- index.scss
|-- index.js