antv/l7中高德地图无法显示的问题
项目中使用了高德作为地图，起初可以正常显示，后来开发过程中，突然无法显示，如图。看了下控制台，没有报错，dom元素实际上也已经创建了，在地图区域的鼠标滚动缩放事件也有反馈。
另外，分别使用了，百度地图和腾讯地图，发现都能正常显示。不过还是要多说一句，百度地图api申请麻烦，而且不知道什么原因拖动以及缩放的卡顿感十分明显，而腾讯地图样式有点丑，而且控制台还有报错，虽然可以正常使用，但对于一个程序员来说，红色的醒目提醒实在让人浑身难受。
❌-->😣
✅-->🥰
但是如果新创建一个项目，单独只使用@antv/l7包，是没问题的，猜测可能是其他包冲突，但由于使用的包太多了，所以也就没一一测试，这时经过查找，发现了网上也有人遇到了这些问题，原来是高德地图与mockjs的冲突。下面即为原文章链接。文末还有一篇文章也遇到了类似问题，通过修改mockjs源码的方式解决，但我试了一下，貌似不太好使，大家可以自行尝试一下。
vue2整合高德地图JS API v2.0页面不展示问题也没有任何报错(MOCKJS冲突)-CSDN博客
解决方案就是不使用mockjs或者使用高德地图API的 v1.4.x版本，上图即为使用@amap-jsapi-loader加载高德js api的方式。
那么在@antv/l7中怎么办呢？经过在文件中查找，发现其实内部也专门分别实现了v1版本和v2版本的高德地图的创建方式。
正常的话，我们引入的是GaodeMap，遇到本文的问题时，只需要替换成GaodeMapV1即可。
import { Scene } from '@antv/l7'
import { GaodeMapV1 } from '@antv/l7-maps';
scene = new Scene({
id: 'map',
map: new GaodeMapV1({
style: 'light', // 样式URL
center: [99.288144, 38.239692],
pitch: 0,
zoom: 3.5,
token: '高德控制台申请的key',
})
参考文章
