谷歌地圖不能與離子cordova運行android

Question

我正在使用離子框架構建一個應用程序。該應用的主要功能是基於谷歌地圖。我使用了this tutorial，它使用了java腳本google maps API。當我運行離子實驗室或離子服務時，一切運作完美，但是當使用運行android模擬器時：離子cordova運行android谷歌地圖應該是完全空白的地方。我也沒有收到任何錯誤消息。此外，我正在使用cordova版本7.0.1和離子版本3.5.0。我已嘗試this question中列出的兩種解決方案，問題仍在發生。

以下是config.xml中的希望相關部分作爲其他職位建議

<content src="index.html" /> 
<access origin="*" /> 
<access origin="http://maps.google.com" /> 
<access launch-external="yes" origin="geo:*" /> 
<allow-navigation href="http://ionic.local/*" /> 
<allow-intent href="http://*/*" /> 
<allow-intent href="https://*/*" /> 
<allow-intent href="tel:*" /> 
<allow-intent href="sms:*" /> 
<allow-intent href="mailto:*" /> 
<allow-intent href="geo:*" /> 
<access origin="*" /> 
<allow-navigation href="*" /> 
<allow-intent href="*" /> 
<allow-intent href="http://maps.google.com" /> 
<preference name="webviewbounce" value="false" /> 
<preference name="UIWebViewBounce" value="false" /> 
<preference name="DisallowOverscroll" value="true" /> 
<preference name="android-minSdkVersion" value="16" /> 
<preference name="BackupWebStorage" value="none" /> 
<preference name="SplashMaintainAspectRatio" value="true" /> 
<preference name="FadeSplashScreenDuration" value="300" /> 
<preference name="SplashShowOnlyFirstTime" value="false" /> 
<preference name="SplashScreen" value="screen" /> 
<preference name="SplashScreenDelay" value="3000" /> 
<platform name="android"> 
    <allow-intent href="market:*" /> 

另外這裏是我鏈接到API

<script src="https://maps.google.com/maps/api/js?key= 
MY_ACTUAL_API_KEY" type="text/javascript"></script> 
<script src="cordova.js"></script> 

如這裏要求是index.html的使用谷歌地圖的主頁的ts html和css html

<ion-header> 
<ion-navbar> 
<ion-title> 
    Smell Louisville 
</ion-title> 
</ion-navbar> 
</ion-header> 

<ion-content> 

<ion-fab top right><button ion-fab round [color]="refr"id="Refr"  
(click)="refMap();setStuff();pickColor();getLatLng();markerOnLocal()"><ion- 
icon name="refresh-circle"></ion-icon></button></ion-fab> 

<div #map id="map"></div> 
<div id="pad"></div> 
<button (click)="openFormPage()" id="hundPer" ion-button outline  
[color]="button1"><div #LeavRev id="LeaVRev"><p id="CenterP">Report how your  
air smells</p></div></button> 
<div id="pad"></div> 
<button (click)="openPastPage();"id="hundPer" ion-button outline 
[color]="button2"> <div #Prev id="PreV"><p id="CenterP">View maps from 
previous days</p></div></button> 
<div id="hundPer"> 
<button id="hundPer"> 
<button (click)="openSettingsPage()"><ion-icon id="right"name="settings">  
</ion-icon></button> 
<button (click)="openAboutPage()"><ion-icon id="right"name="people"></ion- 
icon></button> 
<button (click)="openPMPage()" id="pad"><ion-icon id="right">PM2.5</ion- 
icon>  
</button> 
<button (click)="openCitationPage()" id="pad"><ion-icon id="right" 
name="clipboard"></ion-icon></button> 
<button (click)="openHelpPage()" id="pad"><ion-icon id="right" name="help"> 
</ion-icon></button> 
<button (click)="openKeySendPage()" id="pad"><ion-icon id="right" 
name="key"></ion-icon></button> 
</button> 
</div> 

個

CSS

page-home { 
#map{height:75%} 


#LeavRev{border:solid 
;border-color: green} 
#Prev{border:solid 
;border-color: royalblue} 
#pad{height:1%} 
#padL{height:1%; width:10%; float:left} 
#padR{height:1%; width:100%; float: right; background-color:#E5E5E5} 
#refr{background-color: #6dc066;border:solid;align-content:right;border-     
color: green;color:whitesmoke} 

#CenterP{text-align: center} 
#hundPer{width:100%} 

#right{float:right} 
#left{float:left} 

} 

TS只是希望相關部分

import { Component, ViewChild } from '@angular/core'; 
import { NavController, NavParams, Events,AlertController } from 'ionic- 
angular'; 
import { Geolocation } from '@ionic-native/geolocation'; 
import { FormPage } from '../form/form'; 
import { PastPage } from '../past/past'; 
import { AboutPage} from '../about/about'; 
import { HelpPage} from '../help/help'; 
import { KeySendPage } from '../key-send/key-send' 
import { SettingsPage } from '../settings/settings'; 
import{ Storage } from '@ionic/storage'; 
import{Pm2_5Page} from '../pm2-5/pm2-5'; 
import {CitationPage} from '../citation/citation'; 
import{SendMarkerProvider } from '../../providers/send-marker/send- 
marker'; 
import {NotificationsPage} from '../notifications/notifications'; 


import { AngularFireDatabase } from 'angularfire2/database'; 
//leaving out parts not pertaining to google maps 
export class HomePage { 
@ViewChild('map') mapElement; 
map: any; 
constructor(public navCtrl: NavController, public geolocation: Geolocation,   
public navParams: NavParams, 
public storage:Storage, public events: Events, public  
sendMarker:SendMarkerProvider, private alertCtrl: AlertController, 
private fdb:AngularFireDatabase){ 
//there is some stuff in the constructor but hopefully it is not relevant I 
//trying to reduce the amount of code you have to read through 
} 
ionViewDidLoad(){ 
console.log(this.mapInitDid) 
this.mapInitDid=false; 
this.initMap(); 
} 

//initMap() is supposed to load the map and it doesnt on the android 
//emulator 
initMap(){ 
this.geolocation.getCurrentPosition().then((position) => { 
let latLng = new google.maps.LatLng(38.2527, -85.7585) 
pos=new google.maps.LatLng(38.2527, -85.7585); 
console.log(this.havePerms); 
console.log(latLng) 

    if(this.havePerms==1){ 
    latLng = new google.maps.LatLng(position.coords.latitude,   
position.coords.longitude); 
    } 
    let mapOptions = { 
    center: latLng, 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions); 

}, (err) => { 
    console.log(err); 
}); 

console.log("map is go"); 
this.mapInitDid=true; 
// this.markerOnLocal(); 
} 
} 

任何幫助，將不勝感激

Answer 1

事實證明我是在實際上解決錯誤的問題。該API被加載罰款然而，設備未運行任何代碼的內部

this.geolocation.getCurrentPosition().then((position) => { 
... 
}); 

其中載有所有我的代碼生成的地圖。爲了解決這個問題，我把這部分內容與用戶位置無關，放在initMap()這是this.geolocation.get...所在的方法