高德地图信息弹窗使用element ui 组件 |
您所在的位置：网站首页 › 高德地图ui组件库 › 高德地图信息弹窗使用element ui 组件 |
高德地图信息弹窗使用element ui 组件
|
在项目中，使用高德地图的API，有需求是在点击marker标记的时候，需要弹出windowInfo弹窗，然后弹窗中还有自定义样式、操作等 分析： 直接使用InfoWindow的content连接一组字符串，如果样式和操作复杂，写起来费劲不说，还很容易出bug 解决： 使用Vue.extend 、vm.$el 把弹窗内容写成一个组件加入到windowInfo中，弹窗方法和内容都可以写在组件中 import Tab from "@/components/Tab/tab"; import Vue from 'vue' components: { Tab }, methods: { createInfoDom(infoWindow, item){ let Content = Vue.extend({ template: ``, name: 'DeiceDetail', data(){ return { } } }); let component = new Content().$mount(); infoWindow.setContent(component.$el); infoWindow.open(this.map, [+item.lon, +item.lat]); } }注：引入Vue使用可能会报错 Tab组件 用户管理 配置管理 角色管理 定时任务补偿 import { Tabs, TabPane, } from 'element-ui' export default { components: { Tabs, TabPane }, data() { return { activeName: 'first' }; }, methods: { handleClick(tab, event) { console.log(tab, event); }, } };注：组件内不能使用全局注册的组件，必须单独引入 参考：https://blog.csdn.net/forteenBrother/article/details/109236368 https://blog.csdn.net/HaiJun_Aion/article/details/129046595 |
解决：在vue.config.js中配置runtimeCompiler为true【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |