vue+高德地图 系列五 踩坑

前言

做完项目之后的总结，当初遇到的坑挺多，解决之后，觉得有一部分可以记录下来，以便不再重蹈覆辙

---

1. 在elementUI的dialog中显示高德地图

参考

问题描述：

在dialog中加载地图，有时显示，有时白屏，

原因分析：

组件初始化的时候容器dom还没渲染，所以在对话框里就不能显示

解决方案：

setTimeout(() => {
      ...
}, 1000);

---

2. ‘AMap’ is not defined

问题描述：

这个问题时有出现，总结下来，分两种情况，一种是进页面时，就报错，一种是刷新时报错

原因分析：

如果一直报错，那说明高德地图的加载有问题，你需要检查一下你的script是不是真的加载进来了，如果这一步没问题，那就检查数据，很有可能是，地图加载完毕，但是地图所需数据还没加载完成。
如果是刷新时报错，那妥妥是数据加载顺序的问题

解决方案：

方法一：

setTimeout(() => {
  this.init(); // 获取初始化数据
}, 500);

方法二：

• 把地图相关的方法都放在 初始化init()方法里
• 总之确保先拿到数据，再加载地图

---

总结

做完项目进行的总结，仅供参考