2017-02-07 4 views
0

onsen2とangular2の新機能です。さて、私はハイブリッドアプリを開発しています。私は、デスクトップでうまく動作していますが、アンドロイドとiosでエラー(Googleは定義されていません)で動作していないangular2 Googleマップを実装しようとしました。私が使用したコードを以下に示します。ソリューションは大歓迎です。ただ、エラーなどのコルドバ温泉app.Googleマップは、デスクトップでは動作していますが、アンドロイドとiOSアプリでは動作しません。

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' 
    }); 


} 
} 

答えて

0

グーグルが定義されていない、と言います。 Cordovaを使用する場合は、プラットフォームごとにブラウザのサポートが異なることがあります(すべてのAndroidバージョンでもAndroid用Crosswalkの使用をお勧めします)。

解決策

If(window.google && window.google.maps){ 
// Current code 
} 
else if(plugin.google && plugin.google.maps){ 
// check the link above 
} 
:あなたはPCのブラウザのサポートを維持したい場合は同じように、ロードする前に、各変数をテスト ( thisのような)モバイルデバイス用のプラグインを使用することです
関連する問題