Cordova onsen app.Google Karte funktioniert in Desktop, aber nicht in Androide nd iOS-App

Question

Ich bin neu in Onsen2 und Angular2. Jetzt entwickle ich eine Hybrid-App. Ich habe versucht, angular2 Google Map zu implementieren, die gut in Desktop funktioniert, aber nicht funktioniert in Android und iOS mit Fehler (Google ist nicht definiert). Der Code was ich benutzt habe, ist unten gezeigt. Lösungen sind willkommen.

app.component.html

<div id="map"></div> 

app.component.ts

import {Component} from '@angular/core'; 
import {OnsNavigator} from 'angular2-onsenui'; 

declare var $:any; 
declare var google: any; 
@Component({ 
    selector: 'ons-page[page]', 
    template: require('./page.html'), 
    styles: [require('./page.css')] 
}) 
export class Page { 
    constructor(private navi : OnsNavigator) { 
    } 

    push() { 
    this.navi.element.pushPage(Page); 
    } 

ngOnInit() { 

    // initialize google map 
    var myLatLng = {lat: 12.8767, lng: 80.2302}; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 7, 
    center: myLatLng 
    }); 

    var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title: 'ZSL Inc, 85 Lincoln Highway, Edison, NJ 08820' 
    }); 


} 
} 

Answer 1

Genau wie der Fehler sagt, ist Google nicht definiert. Bei der Verwendung von Cordova müssen Sie berücksichtigen, dass die Browserunterstützung für jede Plattform unterschiedlich sein kann (sogar für jede Android-Version empfehle ich Crosswalk für Android), so dass möglicherweise keine globale Google-Variable definiert ist

Die Lösung ist ein Plugin für mobile Geräte zu verwenden (wie this) Wenn Sie Unterstützung halten wollen für den PC-Browser vor dem Laden der einzelnen variablen nur testen, wie:

If(window.google && window.google.maps){ 
// Current code 
} 
else if(plugin.google && plugin.google.maps){ 
// check the link above 
}