谷歌地图不使用ionic/angular2显示

我使用ionic2显示谷歌地图。但是当我运行下面的代码时，我得到了一个空白页

export class NearByStoresPage {

  constructor(private nav: NavController, private confData: ConferenceData) {
    this.loadNearByOffers();
  }

  loadNearByOffers(){

    let options = {timeout: 10000, enableHighAccuracy: true};

    navigator.geolocation.getCurrentPosition(

        (position) => {
            let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);               

            let mapOptions = {
                center: latLng,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            let map = new google.maps.Map(document.getElementById("map"), mapOptions);

            let marker = new google.maps.Marker({
              map: map,
              animation: google.maps.Animation.DROP,
              position: map.getCenter()
            });

            let content = "<h4>Information!</h4>";          

            let infoWindow = new google.maps.InfoWindow({
              content: content
            });

            google.maps.event.addListener(marker, 'click', function(){
              infoWindow.open(map, marker);
            });
        },

        (error) => {
            console.log(error);
        }, options

    );
  }
}

存储空间附近的导出类{
构造函数（专用导航：导航控制器，专用confData：ConferenceData）{
this.loadNearByOffers（）；
}
loadNearByOffers（）{
let options={timeout:10000，enableHighAccurance:true}；
navigator.geolocation.getCurrentPosition(
（职位）=>{
让latLng=new google.maps.latLng（position.coords.latitude，position.coords.longitude）；
让mapOptions={
中心：拉特林，
缩放：16，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
让map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
让marker=new google.maps.marker({
地图：地图，
动画：google.maps.animation.DROP，
位置：map.getCenter（）
});
让内容=“信息！”；
让infoWindow=new google.maps.infoWindow({
内容：内容
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
},
（错误）=>{
console.log（错误）；
}，选项
);
}
}

我将该文件包括在index.html文件中

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

Html文件

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Near By Offers</ion-title>
</ion-navbar>

<ion-content class="map-page">
  <div id="map"></div>
</ion-content>

近距离报价

但是下面的代码运行良好

this.confData.getMap().then(mapData => {
      let mapEle = document.getElementById('map');

      let map = new google.maps.Map(mapEle, {
        center: mapData.find(d => d.center),
        zoom: 16
      });

      mapData.forEach(markerData => {
        let infoWindow = new google.maps.InfoWindow({
          content: `<h5>${markerData.name}</h5>`
        });

        let marker = new google.maps.Marker({
          position: markerData,
          map: map,
          title: markerData.name
        });

        marker.addListener('click', () => {
          infoWindow.open(map, marker);
        });
      });

      google.maps.event.addListenerOnce(map, 'idle', () => {
        mapEle.classList.add('show-map');
      });

    });

this.confData.getMap（）。然后（mapData=>{
设mapEle=document.getElementById（'map'）；
让map=new google.maps.map（mapEle{
center:mapData.find（d=>d.center），
缩放：16
});
mapData.forEach（markerData=>{
让infoWindow=new google.maps.infoWindow({
内容：`${markerData.name}`
});
让marker=new google.maps.marker({
职位：markerData，
地图：地图，
标题：markerData.name
});
marker.addListener（'单击'，（）=>{
信息窗口。打开（地图、标记）；
});
});
google.maps.event.addListenerOnce（map'idle'，（）=>{
mapEle.classList.add（'show-map'）；
});
});

将宽度和高度添加到地图分区：

<div id="map" style="width:800px;height:600px"></div>

还有这条线

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

---

需要指定回调函数

我认为问题在于您正在调用

this.loadNearByOffers（）方法。然后，该方法尝试通过从DOM获取元素来加载映射

document.getElementById（“映射”）

但是当您的构造函数被执行时，DOM中的元素还不存在，这就是为什么映射没有正确加载的原因

我不知道您在项目中使用的是哪个版本的Ionic，但您可以使用类似的
IoninViewDiCenter
来确保在DOM元素可用后执行代码（并初始化映射）

ionViewDidEnter(){
  // the html of the page is now available
  this.loadNearByOffers();
}

您可以找到一个工作的plunker。
尝试调用loadNearByOffers（）方法，如下所示

ionViewLoaded(){
   this.platform.ready().then(() => {
   this.loadNearByOffers();
   }
}

映射应该在设备就绪事件中加载。
在我的例子中，我在ionViewLoaded方法中调用getElementById，地图仍然没有显示。Cordova CLI:6.3.0 Gulp版本：CLI版本3.9.1 Gulp本地：本地版本3.9.1 Ionic Framework版本：2.0.0-beta.11 Ionic CLI版本：2.0.0-beta.36 Ionic应用程序库版本：2.0.0-beta.19 OS:节点版本：v4.4.7A几个问题：地图元素的高度和宽度是否设置为100%（或任何其他大小）？从Google导入js时是否使用了有效的API密钥？是的，宽度和高度设置为100%，我没有使用API密钥，是的，我正在从google导入JS，发生在设备、ionic view和带有ionic ServeHMM的浏览器上。您可以使用该plunker包含您的代码吗？也许如果你能在那里复制这个问题，我可以看看它，找到重要文件的链接，我有同样的问题，有解决方案吗？