vue2动态初始化多个高德地图

在v2项目中遇到了需要根据后台返的数据条数先动态初始化n个高德地图，然后在渲染具体的坐标点，记录一下；

思路：

1，dom节点动态化，v-for后台返回数据，地图容器的  :id=map + (key + 1)；

2，先生成一个空数组以便于根据后台返回的n个对象生成n个地图实例；

3，遍历返回数据，给第二步的空数组同步push n个地图实例进去直接初始化，后期遍历再调一遍直接改center即可；

上代码：

html部分

模拟后端返回数据

动态渲染添加以及初始化

人走图毁，消除地图实例

到此结束！！效果图如下

还有可能遇到的问题1

不用怀疑，就是没给地图容器设置宽高，设置了就好了！

问题2

这个是dom中地图容器的id和methods中的方法中的new Amap.Map(id,{})不匹配

新手，代码不规范之类的欢迎不吝赐教，谢谢！