Vue組件實現百度地圖彈窗，Vue組件插入節點

今天碰巧有位朋友提到了這個問題，記錄一下。現在不少人習慣了用主流MVVM框架開發，可是碰到如百度彈窗的這個需求的時候，不知道該如何把vue組件與第三方插件混合使用。其實這類問題均可以經過插入節點的方式實現。

案例是使用的vue框架，話很少說，直接上代碼。

<template>
  <div class="map-window" v-if="show">
    <div class="header">
      <i class="el-icon-circle-close" @click="show=false"></i>
    </div>
    <router-link :to="{name:'About'}">About</router-link>
  </div>
</template>

<script>
export default {
  data: () => ({
    show: true // 控制關閉彈窗
  })
}
</script>

<style lang="less" scoped>
  .map-window {
    width: 200px;
    height: 300px;

    .header {
      display: flex;
      justify-content: flex-end;
      font-size: 25px;

      .el-icon-circle-close {
        color: red;
        cursor: pointer;
      }
    }
  }
</style>

複製代碼

以上是彈窗內部的內容，功能很少，控制彈窗的關閉，路由的跳轉

接下來編寫一個建立彈窗的函數

// 引入剛剛寫好的vue組件
import MapLabelWindow from './index'
// 引入store和router,從新實例化的vue要和main.js中的操做同樣
import store from '@/store/index'
import router from '@/router'
import Vue from 'vue'

// 利用Vue.extend擴展vue組件
const WindowConstroctor = Vue.extend(MapLabelWindow)

export default function (id) {
  // 此處實例化
  const domEl = new WindowConstroctor({
    el: document.createElement('div'),
    store,
    router
  })
  domEl.show = true
  document.querySelector('#' + id).append(domEl.$el)
}

複製代碼

<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
import addWindow from './MapWindow/addWindow'
export default {
  data: () => ({
    map: {}
  }),
  methods: {
    async init () {
      // 百度地圖API功能
      const map = new BMap.Map('map', {
        enableMapClick: true,
        minZoom: 5,
        maxZoom: 20
      })
      map.enableScrollWheelZoom(true)
      const point = new BMap.Point(120.166754, 30.261346)
      map.centerAndZoom(point, 5)
      this.map = map
      this.map.centerAndZoom(point, 14)
      const marker = new BMap.Marker(point) // 建立標註

      // 隨便建立一個label盒子,id取爲label
      const label = new BMap.Label('<div id="label"></div>')
      marker.setLabel(label)
      marker.addEventListener('click', () => {
      // 點擊marker時，呼出彈窗，調用剛剛編寫的函數便可
        addWindow('label')
      })
      marker.setTop(true)
      this.map.addOverlay(marker)
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped lang="less">
  #map {
    height: 500px;

    /deep/ #label {

    }
  }
</style>

複製代碼

以上是正常的建立地圖容器的操做，調用便可

效果：

路由功能也能正常使用：