<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ù)代碼，可以配置地圖開(kāi)放的屬性props和監(jiān)聽(tīng)事件。

例如這里，開(kāi)放了ak(申請(qǐng)的百度地圖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里面通過(guò)vue的 runtimeCompiler: true運(yùn)行時(shí)編譯功能，可以調(diào)用vue里面的參數(shù)和方法，這里對(duì)于自定義是很方便的。

效果圖

代碼總覽

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

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