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>

复制代码

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

效果：

路由功能也能正常使用：