Vue组件实现百度地图弹窗,Vue组件插入节点__Vue.js
发布于 3 年前 作者 banyungong 1292 次浏览 来自 分享
粉丝福利 : 关注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>

以上是正常的创建地图容器的操作,调用即可

效果:

路由功能也能正常使用:

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 方土 原文链接:https://juejin.im/post/6844904159284559886

回到顶部