Question

我无法在设备上显示谷歌地图

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
} from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  map: GoogleMap;
  constructor(public navCtrl: NavController) {
  }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');

        // Now you can use all methods safely.
        this.map.addMarker({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: {
            lat: 43.0741904,
            lng: -89.3809802
          }
        })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                alert('clicked');
              });
          });

      });
  }

}

使用此css和html

page-home {
  #map_canvas{
    height: 400px;
  }
}
<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div #map_canvas></div>
</ion-content>

我将在Android设备上运行，该设备通过USB连接到我的PC并使用此命令

ionic cordova run -l -c -s --debug

它给了我这个错误

[23:26:34]  console.warn: Native: tried accessing the GoogleMaps plugin but Cordova is not available. Make sure to 
            include cordova.js or run in a device/simulator

这是一个新项目，我只想尝试离子，我是新的，并希望将谷歌地图添加到应用程序。我在控制台中启用了谷歌地图API，也在设备应用程序刷新，但地图没有显示。

谢谢你的任何事情

Answer 1

尝试使用multiple_maps分支版本。

``` $＆GT; git clone https://github.com/mapsplugin/cordova-plugin-googlemaps

$＆GT; git checkout multiple_maps

$＆GT; git pull

$＆GT; cd（项目目录）

$＆GT; cordova插件rm cordova-plugin-googlemaps

$＆GT; cordova插件添加（路径）/ cordova-plugin-googlemaps - 变量API_KEY_FOR_ANDROID =“...” - 变量API_KEY_FOR_IOS =“...” ```

IONIC谷歌地图显示白色屏幕

1 个答案: