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 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试4 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人12 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人13 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR18 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香20 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969323 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai29 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc33 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91537 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js