A friend happened to mention this question today, for the record. Nowadays many people are used to using the mainstream MVVM framework development, but encounter such as Baidu popup this requirement, do not know how to mix vUE components with third-party plug-ins. In fact, this kind of problem can be achieved by inserting nodes.

The case is to use the VUE framework, without saying much, directly on the code.

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

Copy the code

The above is the content inside the popover, which has few functions. It controls the closing of the popover and the jump of the route

Next, write a function that creates a popover

// Import the newly written vue component import MapLabelWindow from'./index'// Import store and router. Re-instantiate vue as import store from main.js'@/store/index'
import router from '@/router'
import Vue from 'vue'// Extend Vue with vue. extend const WindowConstroctor = vue. extend(MapLabelWindow)export default function(id) {// Instantiate const domEl = new WindowConstroctor({el: document.createElement('div'),
    store,
    router
  })
  domEl.show = true
  document.querySelector(The '#' + id).append(domEl.$el)}Copy the code
<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
import addWindow from './MapWindow/addWindow'
export default {
  data: () => ({
    map: {}
  }),
  methods: {
    async initConst map = new bmap.map () {// const map = new bmap.map ()'map', {
        enableMapClick: true,
        minZoom: 5,
        maxZoom: 20
      })
      map.enableScrollWheelZoom(true) const point = new map.point (120.166754, 30.261346) map.centerandZoom (point, 5) this.map = map this.map.centerAndZoom(point, 14) const marker = new map. marker (point) const marker = new map. marker (point) const marker = new map. marker (point)'<div id="label"></div>')
      marker.setLabel(label)
      marker.addEventListener('click', () => {// Call popover when click marker, call function just written to addWindow('label')
      })
      marker.setTop(true)
      this.map.addOverlay(marker)
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped lang="less">
  #map {
    height: 500px;

    /deep/ #label {

    }
  }
</style>

Copy the code

The above is normal to create a map container operation, call

Effect: