vue地图加载报错:map container div not exist

参考文献:

vue地图加载报错:map container div not exist-CSDN博客

原因:

  1. 地图加载的id与html中不一致

<div id="container" style="width: 1000px; height: 700px;">

let map = new this.AMap.Map('myMap', {

center: [121.227577, 31.101471], // 中心点坐标

resizeEnable: true, // 是否监控地图容器尺寸变化

zoom: 10, // 初始化地图层级,可以理解为缩放比例

showMarker: true, // 定位成功后在定位到的位置显示点标记,默认:true

});

2.地图加载的时候dom结构还没生成,把initmap函数放到了created生命周期中加载

// 错误:

created(){

this.initMap()

}

// 改为

mounted(){

this.initMap()

}

3.地图容器所在html代码被隐藏掉了,或者之前的代码存在错误

<el-row v-if="form.attachmentInfoList.length != 0">

<el-col :span="24">

<el-form-item label="¸½¼þÐÅÏ¢">

<div class="demo-image__preview" v-for="item in form.attachmentInfoList" :key="item">

<el-image style="width: 100px; height: 100px; float:left" :src="item" :preview-src-list="form.attachmentInfoList"></el-image>

</div>

</el-form-item>

</el-col>

</el-row>

<el-row :gutter="20">

<el-col :span="24">

<div class="grid-content bg-purple">

<el-form-item label="">

<div id="mapDiv" style="width: 100%;height: 650px;border:1px solid #bfcbd9;padding: 8px;z-index: 0;"></div>

</el-form-item>

</div>

</el-col>

</el-row>

data() {

return {

form: {

// attachmentInfoList: []

},

}

},

刚开始data中注销掉了form中的attachmentInfoList属性,在html中第一个row中有个判断

v-if="form.attachmentInfoList.length != 0"

此处form.attachmentInfoList为undefined,没有length属性,所以报错了

相关推荐
风一样的美狼子1 分钟前
仓颉语言核心数据结构-高性能与类型安全的工程实践
java·服务器·前端
旺仔小拳头..8 分钟前
HTML的布局—— DIV 与 SPAN
前端·html
T___T8 分钟前
从原生 CSS 到 Stylus:用弹性布局实现交互式图片面板
前端·css
Zyx20078 分钟前
Stylus 进阶:从“能用”到“精通”,打造企业级 CSS 架构(下篇)
前端·css
黄毛火烧雪下10 分钟前
Angular 入门项目
前端·angular
用户40993225021211 分钟前
快速入门Vue3,插值、动态绑定和避坑技巧你都搞懂了吗?
前端·ai编程·trae
CondorHero12 分钟前
Environment 源码解读
前端
残冬醉离殇14 分钟前
别再傻傻分不清!从axios、ElementPlus深入理解SDK与API的区别
前端
CodeSheep23 分钟前
稚晖君官宣,全球首个0代码机器人创作平台来了!
前端·后端·程序员
向上的车轮26 分钟前
Actix Web 入门与实战
前端·rust·actix web