高德地图信息弹窗使用element ui 组件

在项目中，使用高德地图的API，有需求是在点击marker标记的时候，需要弹出windowInfo弹窗，然后弹窗中还有自定义样式、操作等
分析：
直接使用InfoWindow的content连接一组字符串，如果样式和操作复杂，写起来费劲不说，还很容易出bug
解决：
使用Vue.extend 、vm.$el 把弹窗内容写成一个组件加入到windowInfo中，弹窗方法和内容都可以写在组件中

import Tab from "@/components/Tab/tab";
import Vue from 'vue'
 
<script>
    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]);
        }
    }
</script>

注：引入Vue使用可能会报错

解决：在vue.config.js中配置runtimeCompiler为true

module.exports = {
	runtimeCompiler: true
}

Tab组件

<template>
    <div class="cla">
        <tabs v-model="activeName" type="card" @tab-click="handleClick">
            <tab-pane label="用户管理" name="first">用户管理</tab-pane>
            <tab-pane label="配置管理" name="second">配置管理</tab-pane>
            <tab-pane label="角色管理" name="third">角色管理</tab-pane>
            <tab-pane label="定时任务补偿" name="fourth">定时任务补偿</tab-pane>
        </tabs>
    </div>
</template>
<script>
import { Tabs, TabPane, } from 'element-ui'
export default {
    components: {
        Tabs, TabPane
    },
    data() {
        return {
            activeName: 'first'
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
    }
};
</script>

注：组件内不能使用全局注册的组件，必须单独引入

参考：https://blog.csdn.net/forteenBrother/article/details/109236368
https://blog.csdn.net/HaiJun_Aion/article/details/129046595