基于nuxt和iview搭建OM后台管理系统实践(5)-高德地图地块气象数据展示组件的封装

封面图，基于创客贴在线制作

这是《基于nuxt和iview搭建OM后台管理系统实践》这一个系列文章的目录，大致思路如下：

• 简要介绍OM后台管理系统，以及开发环境

• 自行封装的公共组件，富文本quill[已完成]、地图、上传组件（阿里oss、七牛上传组件已经完成）的封装过程

• 项目上线流程，自动化打包（Jenkins）

• 项目总结，总结开发过程中的坑点，避免以后再掉坑

上几篇记录了几个功能比较简单的组件，本篇的高德地图封装遇到了蛮多坑，在此记录一下，避免后面再踩坑。

说到地图组件，其实是其他项目组需要地图数据展示，然后我被借调到其他项目组，最终翻阅高德地图众多api后终于完成了。

高德地图组件展示

本地数据原因，没有完整的展示地图组件功能，待去公司再截取动态图

// 文件componets/amap-weather.vue
    .v-charts-data-empty {        position: absolute;        top: 0;        left: 40%;        font-size: 16px;        top: 10%;
    }

使用方法：按照vue标准引用局部组件的方式引入即可，分别传入getlandRequestURL，getgeoJsonURL，getWeatherJsonURL，getAreaData地址。

• 在封装高德地图组件过程中遇到最大的一个坑：nuxt路由跳转到地图页面报错，最终的解决方案是在left-nav.vue跳转方法里做判断，如果路由路径为map就刷新页面，同时利用:active-name="menuName"属性展开左侧菜单；

路由跳转报错展示

• 另外一个坑就是服务端渲染带来的问题，最终在mounted生命周期函数中根据process做判断是浏览器端还是服务端并做相应的处理，如代码所示

mounted() {
    var _this = this;    if (process.browser) {
        _this.initMap();
        _this.getData();
    }
}

• 展示的气象数据需要用到echart图表展示，这一块时间限制并没有做很好的封装，导致代码太乱，后续有时间会做优化；

乱得一批的代码

• 另外对于组件命名也不规范，官方推荐用amap-weather.vue这种，在做这一块的总结的时候可以看到上面的代码改过来了；

组件命名规范

作者：愿爱无忧dk_
链接：https://www.jianshu.com/p/184d67402f67