[英]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.