search

ElemeFE / vue-amap

🌍 基于 Vue 2.x 和高德地图的地图组件
https://elemefe.github.io/vue-amap/
MIT License
3.33k stars 584 forks source link

用v-if控制map显示隐藏的时候，当移动鼠标的时候浏览器控制台报错 Uncaught TypeError: Cannot read property 'Ac' of null #497

Open caoguotao opened 5 years ago

caoguotao commented 5 years ago

问题

<template v-if="id==='company'">
        <el-amap class="amap-box" vid="map" :center="center" :zooms="zooms" ref="map" >
         </el-amap>
</template>
<template v-else>
</template>

VueAMap 版本

^0.5.8

OS/Browsers version

windows/Chrome 71.0.3578.98

Vue 版本

2.x

报错信息

VM15632:381 Uncaught TypeError: Cannot read property 'Ac' of null ​ at c.eg (eval at (maps?key=256f485dca2b10552a5a17c3f69ae1c7&v=1.4.4&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MapType,AMap.PolyEditor,AMap.CircleEditor,AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor&callback=amapInitComponent:3),

xieyezi commented 4 years ago

找到解决办法了。可以给地图组件添加keep alive属性：

//router.js
{
   path: '/vue-amap',
        component: Move,
        meta: {
            keepAlive: true // 标记列表页需要被缓存
        }
}

然后在router-view 里面判断是否有keepAlive属性即可:

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>