cordova-google-maps 插件不显示地图（Ionic 2 + Angular 2）

Question

使用 Google Api 密钥安装了 cordova-google-maps 插件。

cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="myKeyHere" --variable API_KEY_FOR_IOS="myKeyHere"

在我的一个子元素模板中为地图创建容器：

<div id="map_canvas" style="width: 200px; height: 200px"></div>

制作服务，将创建地图：

import { Injectable, ElementRef } from '@angular/core';
import { GoogleMap, GoogleMapsLatLng } from 'ionic-native';

@Injectable()
export class MapService {
    public customMap: GoogleMap;

    constructor() {
    }

    public loadMap(container: string) {
        let location = new GoogleMapsLatLng('65.9667', '-18.5333');

        this.customMap = new GoogleMap(container);

        GoogleMap.isAvailable().then(data => {
            this.customMap.animateCamera({target: location, zoom: 10});
        });
    }
 }

当组件准备好（按下按钮）时，从子组件调用地图创建：

this.mapService.loadMap('map_canvas');

“loadMap”函数没有出现任何错误。完成后，所有父元素都包括子元素（其中为地图创建容器，ID 为“map_canvas”）获取 css 类“_gmaps_cdv_”，使背景透明。

但地图不显示，加上创建地图的组件也不会显示。 难道我做错了什么？或者有人可以指导我，如何在想要的组件上显示谷歌地图。谢谢。

Answer 1

我在 Ionic 2 中也遇到过这个问题。我已经为此投入了 3 天时间。下面的事情解决了我的问题。

• 您的 Google API 密钥和 - 您可以检查 Google 控制台以验证您的 API 命中与否。

Home.html

<ion-header class="bar bar-header bar-positive">
  <ion-navbar>
    <ion-title>
      Ionic Blank Map
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div #map id="map"></div>
</ion-content>

Home.scss

page-home ion-content {
  background: rgb(229, 227, 223);
}

page-home #map {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 150ms ease-in
}

.home-page{
  #map{
    height: 100%;
    width: 100%;
  }
}

page-home #map.show-map {
  opacity: 1;
}

#map {
  width: 100%;
  height: 100%;
}

Home.ts

import { Component } from '@angular/core';

import { NavController, Platform } from 'ionic-angular';
import {Observable} from 'rxjs/Observable';

import { Geolocation, GoogleMapsEvent, GoogleMapsLatLng, GoogleMap, CameraPosition, GoogleMapsMarkerOptions,  GoogleMapsMarker} from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  map:any;
  MarkerData = [];

  constructor(public navCtrl: NavController, private platform: Platform) {     
    this.platform.ready().then(() => {
        //alert('this.platform.ready');
        this.obtenerPosicion();
    })
  }

  obtenerPosicion():any{
    //alert('obtenerPosicion');
    let options = {timeout:10000, enableHighAccuracy:true, maximumAge:2000};

    Geolocation.getCurrentPosition(options).then((position) => {

        //alert('Geolocation getCurrentPosition');
          console.log(position.coords);
          let coordenada = [{
            'longitude' : position.coords.longitude,
            'latitude' : position.coords.latitude
          }];
          console.log(coordenada);
          this.loadMap(coordenada);

      }, (err) => {

        ////alert(err);
        console.log(err);

        //alert('Error in obtenerPosicion');

        let coordenadaDefault = [{
          'longitude' : 78.9629,
          'latitude' : 20.5937
          // 'longitude' : 150.644,
          // 'latitude' : -34.397
        }];
        this.loadMap(coordenadaDefault);
        //alert("The Geolocation faild. Please Search location manually.");

      });
  }

  loadMap(coordenada:any[]){
      //alert('loadMap');
      let mapEle = document.getElementById('map');
      mapEle.classList.add('show-map');


      console.log(coordenada);
      let longitud = coordenada[0]['longitude'];
      let latitude = coordenada[0]['latitude'];
      // let location: crea un objeto con las coordenadas latitude y longitud y es pasada a las // opciones de google maps.

      //alert('Set location');
      let location = new GoogleMapsLatLng(latitude,longitud);
      //alert(location);

      this.map = new GoogleMap('map', {
          'backgroundColor': 'white',
          'controls': {
          'compass': true,
          'myLocationButton': true,
          'indoorPicker': true,
          'zoom': true,
        },
        'gestures': {
          'scroll': true,
          'tilt': true,
          'rotate': true,
          'zoom': true
        }
        // ,'camera': {
        //   'latLng': location,
        //   'tilt': 30,
        //   'zoom': 15,
        //   'bearing': 50
        // }
      });


      this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
        console.log('Map is ready!');
        //alert('Map is ready!');


          this.map.addMarker({
              'position': location,
              'icon': 'green',
              'title': "Pickup Location",
              'draggable': true
            }, function(marker) {

              marker.showInfoWindow();

                //Drag event of marker
                  marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_END, function(marker) {
                    marker.getPosition(function(latLng) {
                      marker.setTitle(latLng.toUrlValue());
                      marker.showInfoWindow();
                    });
                  });

                //alert('Marker added.');          
            });

            this.map.animateCamera({
                'target': location,
                'tilt': 0,
                'zoom': 15,
                'bearing': 0,
                'duration': 3000 // = 3 sec.
              }, function() {
                console.log("The animation is done");
                //alert('The animation is done.');                            
              });



      });


      //alert('mapEle classList Add show-map');
  }

}

在 LoadMap 方法中，我添加了以下代码。这将设置类和类将应用不透明度。添加此行后，我的地图开始显示。如果我对此发表评论，我的 Google 控制台 API 仪表板将不会受到任何影响。

let mapEle = document.getElementById('map');
mapEle.classList.add('show-map');

* 注意：- Ionic View 不会显示地图控件，浏览器也不会显示本机地图控件。对此进行测试的唯一选择是通过 ionic run android

在您的设备上部署您的应用

请让我知道您仍然面临任何问题。

Answer 2

不知道，没有找到任何解决方案（goole-maps 刚刚出现在我的根组件中，背景为灰色，也使所有子元素的背景透明）。

选择了静态地图 API（也来自 google）。它根据位置坐标返回地图图片。