Vue组件实现百度地图弹窗,Vue组件插入节点
2020/5/15 11:56:23
本文主要是介绍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> 复制代码
以上是正常的创建地图容器的操作,调用即可
效果:
路由功能也能正常使用:这篇关于Vue组件实现百度地图弹窗,Vue组件插入节点的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南