Vue组件实现百度地图弹窗,Vue组件插入节点__Vue.js
粉丝福利 : 关注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