Question

如何在 Ionic 3 中使用 Google 地图

2017-06-16

5606

angular typescript google-maps ionic-framework

未捕获（在承诺中）：

TypeError: Cannot read property 'firstChild' of null TypeError: Cannot read property 'firstChild' of null at Object._.og (maps.googleapis.com/maps/api/js?key=&callback=initMap:88:391) at new tg (maps.googleapis.com/maps/api/js?key=&callback=initMap:90:76) at ParkMapPage.initializeMap

当我尝试 ionic serve --lab 时出现上述错误

import { Component } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';


@Component({
  selector: 'page-park-map',
  templateUrl: 'park-map.html'
})

export class ParkMapPage {
  map: google.maps.Map;

  constructor(public navCtrl: NavController, public platform: Platform) {
    this.map = null;
    this.platform.ready().then(() => {
      this.initializeMap();
    });
  }

  initializeMap() {
    let minZoomLevel = 3;

    this.map = new google.maps.Map(document.getElementById("map_canvas"), {
      zoom: minZoomLevel,
      center: {lat: 39.833, lng: -98.583},
      mapTypeControl: false,
      streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  }

}

以上是我在 Typescript 文件中的代码。

<ion-content> <div id="map_canvas"></div> </ion-content>

以上是我在 HTML 文件中的代码。

这是一本书中的练习。我无法解决，有人可以帮帮我吗 ):

Answer 1

我强烈建议您使用 Ionic Native 谷歌地图包装器，而不是单独使用。

1. 安装 Cordova 和 Ionic Native 插件：

$ ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"
$ npm install --save @ionic-native/google-maps

2. 安装插件包后，将其添加到您应用的 NgModule。

...

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    GoogleMaps
    ...
  ]
  ...
})
export class AppModule { }

3. 用法

import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';

export class MapPage {
 constructor(private googleMaps: GoogleMaps) {}

// Load map only after view is initialized
ngAfterViewInit() {
 this.loadMap();
}

loadMap() {
 // make sure to create following structure in your view.html file
 // and add a height (for example 100%) to it, else the map won't be visible
 // <ion-content>
 //  <div #map id="map" style="height:100%;"></div>
 // </ion-content>

 // create a new map by passing HTMLElement
 let element: HTMLElement = document.getElementById('map');

 let map: GoogleMap = this.googleMaps.create(element);

 // listen to MAP_READY event
 // You must wait for this event to fire before adding something to the map or modifying it in anyway
 map.one(GoogleMapsEvent.MAP_READY).then(
   () => {
     console.log('Map is ready!');
     // Now you can add elements to the map like the marker
   }
 );

 // create LatLng object
 let ionic: LatLng = new LatLng(43.0741904,-89.3809802);

 // create CameraPosition
 let position: CameraPosition = {
   target: ionic,
   zoom: 18,
   tilt: 30
 };

 // move the map's camera to position
 map.moveCamera(position);

 // create new marker
 let markerOptions: MarkerOptions = {
   position: ionic,
   title: 'Ionic'
 };

 const marker: Marker = map.addMarker(markerOptions)
   .then((marker: Marker) => {
      marker.showInfoWindow();
    });
 }

}

Answer 2

当然，前面的答案来自 maninak，非常不错。作为替代方案，要以直接的 javascript 方式修复此问题，如 chris griffith 在其书中所述，请参阅：链接到图书论坛

这很简单 - 您需要将对 this.initializeMap(); 的调用移至 ionViewDidLoad() 函数：

ionViewDidLoad() {
    this.initializeMap();
}

这进入 ParkMapPage 类。并删除构造函数中对 initializeMap 的调用。

这些更改是由于来自 Ionic 3 而不是 Ionic 2 的更改造成的。