antd vue里面调用一个leaflet.js地图的自定义地图组件.
在弹窗里展示地图.
可能会遇到过 Map container not found 错误提示.

解决办法:mounted生命周期函数里面 ,this.$nextTick 里面去渲染地图

<template>
    <div>
        <a-modal
            :visible="visible"
            title="绘制地块轮廓 鼠标点击地图开始绘制"
            @cancel="done"
            :width="800"
            :bodyStyle="{ padding: 0 }"
            centered
            :footer="null"
            :maskClosable="false"
        >
            <a-button type="default" @click="done">关闭</a-button>
            <a-button type="default" @click="draw">绘制/重绘</a-button>
            <a-button type="default" @click="pm">标记</a-button>
            <div class="map" id="mapElement"></div>
        </a-modal>
    </div>
</template>
<script>
import * as mapMaker from '../../utils/MapMaker.js'
export default {
    mounted() {
        this.$nextTick(() => {
            this.map = xxxxxx
        })
    },
    省略其他
}
</script>
Logo

一站式 AI 云服务平台

更多推荐