在vuejs中加载Google地图的更好的方法是哪种？

Question

第1步

我一直在script标记中加载google map，并调用了initMap回调函数，因此对地图进行了初始化，并且可以在浏览器以及Vue组件中访问map变量。

<script>
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11.8,
      center: {lat: 17.42, lng: 78.3867}
    })
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API-KEY&libraries=places&callback=initMap"></script>

这是我最初加载的方式，并且在加载地图后，Vue方法中可以使用map变量。但是，当页面加载时，我不得不调用一些将多边形放置在地图上的函数，因此我尝试在mounted()内调用该函数，但是map变量不可用。

第2步

现在我仍然在vue2-google-maps内更改为mounted()包，我可以看到mapPromise而不是mapObject。

第3步

我又回到脚本标签，然后而不是在HTML脚本标签内调用initMap，（在看到StackOverflow答案之后）我在组件内部编写了这样的代码，并调用了它起作用的函数。将Google地图加载并将地图存储在数据对象中的这种方法正确吗？

methods: {
  initMap() {
    this.map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 17.42, lng: 78.3867},
          zoom: 11.8
          })
  }
},
mounted(){
  this.initMap()
  this.$refs.ghmcZone.click()
}