vue 使用element 对话框显示地图插件 首次加载不显示 解决方案

在element对话框中使用地图插件时，会出现首次不会加载成功，这时使用$nextTick初始化地图插件即可
代码如下

<template>
    <div class="app-container">
        <el-row>
            <el-col :span="24">
                <el-button type="primary" size="small" @click="new_data">新增</el-button>
            </el-col>
        </el-row>
        <el-dialog
            title="新增"
            :visible.sync="centerDialogVisible"
            width="50%"
            center>
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
                    <el-form-item label="分公司名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="phone">
                        <el-input v-model="ruleForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="打卡地址" prop="addr">
                        <el-input v-model.number="ruleForm.addr"></el-input>
                    </el-form-item>
                    <div id="my_container"></div>
                    <el-form-item label="上班时间" prop="start_work_time">
                        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.start_work_time"></el-time-picker>
                    </el-form-item>
                    <el-form-item label="下班时间" prop="end_work_time">
                        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.end_work_time"></el-time-picker>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resetForm('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
	// 导入地图需要使用的插件
    import AMap from 'AMap'
    import store from '@/store'
    import Vue from 'vue'
    import { GetAjax, PostAjax, PatchAjax, DeleteAjax } from '@/api/myapi'
    import datetime from 'date-and-time'

    export default {
        name: "company_manage",
        data () {
            return {
                centerDialogVisible: false,
                centerDialogVisible_two: false,
                centerDialogVisible_patch: false,
                page_datas: [],
                ruleForm: {
                    name: '',
                    phone: '',
                    addr: '',
                    long: '',
                    lat: '',
                    start_work_time: '',
                    end_work_time: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入分公司名称', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' }
                    ],
                    addr: [
                        { required: true, message: '请输入打卡地址', trigger: 'blur' }
                    ],
                    start_work_time: [
                        { required: true, message: '请选择上班时间', trigger: 'change' }
                    ],
                    end_work_time: [
                        { required: true, message: '请选择下班时间', trigger: 'change' }
                    ],
                },
                delete_data: {},
                page_tatol: 100,
                search: '',
                keyword: '',
                my_pagination: {
                    page: 1,
                    page_size: 10,
                    search: '',
                },
            }
        },
        methods: {
        	// 初始化地图插件的方法
            init() {
                var map = new AMap.Map('my_container',{
                  resizeEnable: true,
                  zoom: 18,
                //   center: [121.542282,29.831995]
                })
                AMap.plugin('AMap.Geolocation',function(){ //异步加载插件
                    var geolocation = new AMap.Geolocation()
                    map.addControl(geolocation)
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(formName == 'ruleForm') {
                            console.log(datetime.format(this.ruleForm.start_work_time,"hh:mm"))
                            console.log(this.ruleForm)
                        } else{
                            console.log(this.ruleForm_patch)
                        }
                    } else {
                        console.log('error submit!!')
                        return false;
                    }
                })
            },
            resetForm(formName) {
                console.log(formName)
                this.centerDialogVisible = false
                this.$refs[formName].resetFields()
                this.centerDialogVisible_patch = false
            },
            new_data() {
                this.centerDialogVisible =true
                // 在这里使用$nextTick初始化地图插件即可
                this.$nextTick(() => {
                    this.init()
                });
            },
        },
        created: function() {
        }
    }
</script>

<style scoped>
#my_container{
    margin-left: 110px;
    height: 300px;
    width: calc(100% - 110px);
}
</style>