Javascript TypeError:无法读取属性'；第一个孩子'；使用vue js显示街景全景时的空值

我正在尝试在VueJS中使用google maps API显示街景全景 我关注谷歌地图文档，这是模板部分：

 <div id="map"></div>
 <div id="pano"></div>

我在index.html中提到了这一点

  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"> 
   </script>

---

我解决了这个问题，所以我将脚本加载到main.js中

export const loadedGoogleMapsAPI = new Promise( (resolve,reject) => {

window['initialize'] = resolve;

let GMap = document.createElement('script');

GMap.setAttribute('src',
'https://maps.googleapis.com/maps/api/jskey=API_KEY&callback=initialize');
document.body.appendChild(GMap); 
 });

然后我将其导入到我的组件中：

import { loadedGoogleMapsAPI } from "@/main";

然后我在mounted（）中调用了initialize函数：

我希望这对你有用

import { loadedGoogleMapsAPI } from "@/main";

  mounted() {
loadedGoogleMapsAPI.then(() => {
  console.log("loaded");
  this.initMap();
});
},
methods: {
initMap() {
  const element = document.getElementById(this.mapName);
  console.log(this.mapName);
  const options = {
    zoom: 14,
    center: new google.maps.LatLng(this.station.lat, this.station.lng)
  };
  const map = new google.maps.Map(element, options);
  var panorama = new google.maps.StreetViewPanorama(
        document.getElementById(this.panoName), {
          position: new google.maps.LatLng(this.station.lat, 
          this.station.lng),
          pov: {
            heading: 34,
            pitch: 10
          }
        });
    map.setStreetView(panorama);
  }
  }