簡體   English   中英

IONIC谷歌地圖顯示白色屏幕

[英]IONIC google map showing white screen

我無法在設備上顯示Google地圖

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 

它是一個新項目,我只想嘗試離子性,即時通訊,並希望將Google Map添加到應用程序。 我在控制台中以及在設備應用刷新時啟用了Google Maps API,但未顯示地圖。

謝謝你

嘗試使用multiple_maps分支版本。

```$> git clone https://github.com/mapsplugin/cordova-plugin-googlemaps

$> git checkout multiple_maps

$> git pull

$> cd(項目目錄)

$> cordova插件rm cordova-plugin-googlemaps

$> cordova插件添加(路徑)/ cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID =“ ...” --variable API_KEY_FOR_IOS =“ ...”```

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM