Question

我是onsen2和angular2的新手。现在，我正在开发混合应用程序。我试图实现angular2谷歌地图，它在桌面上工作正常，但没有在android和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'
  });


}
}

Answer 1

就像错误说的那样，谷歌没有定义。使用Cordova时，您需要记住，每个平台的浏览器支持可能不同（即使是每个Android版本，我建议使用Crosswalk for Android），因此可能没有定义全局google变量

解决方案是使用移动设备插件（如this）如果您想继续支持PC浏览器，只需在加载前测试每个变量，例如：

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

Cordova温泉app.Google地图正在桌面上工作但不能在android和ios应用程序中工作

1 个答案: