TypeError：使用vue js显示街景全景时无法读取null的属性'firstChild'答案

【问题标题】：TypeError: Cannot read property 'firstChild' of null while displaying street view panorama using vue jsTypeError：使用vue js显示街景全景时无法读取null的属性'firstChild'
【发布时间】：2018-09-25 13:20:34
【问题描述】：

我正在尝试在 VueJS 中使用谷歌地图 API 显示街景全景图我关注了谷歌地图文档https://developers.google.com/maps/documentation/javascript/examples/streetview-simple?hl=fr，这是模板部分：

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

这是脚本部分：

mounted() {
var fenway = { lat: 42.345573, lng: -71.098326 };
var latlng = new google.maps.LatLng(42.345573, -71.098326);
map = new google.maps.Map(document.getElementById('map'), {
  center: latlng,
  zoom: 14
});


var panorama = new google.maps.StreetViewPanorama(
  document.getElementById("pano"),
  {
    position: fenway,
    pov: {
      heading: 34,
      pitch: 10
    }
  }
);
map.setStreetView(panorama);
}

我在 index.html 中提到过这个

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

【问题讨论】：

标签： javascript google-maps vue.js vuejs2 google-street-view

【解决方案1】：

我解决了这个问题，所以我在 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()中调用了初始化函数：

  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);
  }
  }

希望对你有用

【讨论】：