vue+谷歌地图Google Map的使用（四）

前言

本篇文章，主要是为了解决文章一内容的实现在实际项目中造成的性能BUG

一、文章一在实际项目运用时的问题

文章中，主要是讲了如何在项目中引入谷歌地图的库，并在相应组件的DIV中展示出来。但是，要注意~其中的例子只是一个简单的vue DEMO效果，并不涉及多个组件，所以在当时，是将js文件放置在index.html文件中引入的。要知道，对vue来说index.html是一个总的入口文件，而vue又是单页面应用，挂在id为app的div下然后动态渲染路由模板，这就造成在实际项目中：每次页面的加载都会去加载这个js文件，从而让整个项目的页面加载都显得很是缓慢
而如果，整个项目中~你又添加了过场动画，那就会使得整个项目在运行时，页面始终被加载动画遮罩，而看到实际的业务界面

二、解决问题的思路与方案（踩坑之路）

1，最开始的思路是，按需加载，只有使用地图的这个组件在加载时，再去加载地图资源。
但在实际实现时，发现google始终在报错，无论是import引入，还是外部JS引入，走到加载地图时，控制台直接抛错，所以放弃了此方案（这是最深的坑，后续会解疑）

2，在发现无论如何无法按需引入，就考虑在index.html做文章，看是否可以获取相应路由，根据路由去判断是否加载JS文件。事实证明，这个也行不通，无法在index.html文件实时获取路由，因此~放弃

3，接着考虑在组件内写个方法，通过axios去发送接口，然后依据回参的状态码~来决定是否展示地图，事实证明，行不通，axios无法发通交易，pass

4，尝试下载整个js文件，将其放置在静态资源内，在通过import引入.事实证明~还是不行，加载在这个js文件时，会报错，pass

5，综上之后，重新捋思路：既然页面加载慢，是因为谷歌的JS文件加载慢，那就在index.html文件中将其放置在最后再执行，也就是利用defer属性，等其他文件、页面渲染完毕，再加载谷歌地图文件。这样虽然没有解决每个页面都要加载谷歌JS的问题，但对用户而言，页面是正常渲染的，而谷歌JS即使未加载，也不耽误用户看到正常业务界面。
但在实操时发现，虽然利用defer让页面渲染完毕再加载谷歌JS，但项目全局还有个动画loading,是根据接口是否开始、结束来显隐的（泪奔 ~~o(>_<)o ~~），也就是说，即使放在最执行谷歌JS，但因为此接口未结束，就算其他页面渲染、加载完毕，最上方依旧有loading动画遮罩，最终此方案pass

6，自此，脑袋已经蒙了蓦然发现，思路1，是可以的，之所以加载时报错，是因为未翻墙，JS就是没加载处理，不报错就怪了

三、实际代码示例

代码范例：

<template>
  <div id="google-map" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
export default {
  name: 'GoogleMapComponent',
  mounted() {
    this.loadGoogleMap();
  },
  methods: {
    loadGoogleMap() {
      const script = document.createElement('script');
      script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
      script.async = true;
      document.head.appendChild(script);
 
      // 初始化地图的回调函数
      window.initMap = () => {
        const map = new google.maps.Map(document.getElementById('google-map'), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8
        });
      };
    }
  }
};
</script>

在这里，还有个优化点：上面的方案会导致每点击一次地图弹窗，就会append一个js,因此实际可以 通过catch方法，去优化

总结

回过头再回顾自己的思路历程，会发现：在解决问题时，一定要注意细节，不然真的会事倍功半的