vue ssr引入百度地图遇见的坑

vue ssr项目，按照开发需求要引入地图功能。

1.vue-baidu-map

vue ssr想要引入百度地图使用，查找到了第三方插件vue-baidu-map，按照官网引入后，控制台没有报错、但是地图渲染背景为灰白色，没有地标建筑，当鼠标滑过还有变为小手的效果，点击也能查看地标详情。多方查找，没有找到该插件下同样问题的解决办法。

2. 原生api
   于是，我放弃了第三方插件，转而去了百度地图的开放平台，引入了js api，按照官网步骤引入后，同样也出现了这个问题，现象还是相同的。
3. 静态页面
   我开始怀疑这是百度的问题，于是，我按照百度的demo，做了一个静态页面，发现，静态页面下，能够正常显示地图。

经过这么多尝试后，我开始怀疑是不是因为ssr这个框架啊，但是又什么报错都没有，不论是前台还是后台，都没有任何错误。最后发现，其实并不是插件引用的问题，而是样式问题，在此之前，整个项目写了公共样式，其中包含了

img.kxb-resize{
  width: 100%;
}

这个本质是为了让项目中的图片不至于撑坏布局，却影响了，地图背景图的显示。

把这个样式删掉后，地图就能正常显示了，即使使用vue-baidu-map这个第三方插件，也能显示出来。至此，踩坑结束了！