Cordova onsen app.Google 地图在桌面上工作，但在 android nd ios 应用程序中不工作答案

【问题标题】：Cordova onsen app.Google map is working in desktop but not working in android nd ios appCordova onsen app.Google 地图在桌面上工作，但在 android nd ios 应用程序中不工作
【发布时间】：2017-02-07 12:05:13
【问题描述】：

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


}
}

【问题讨论】：

标签： cordova angular google-maps-sdk-ios onsen-ui2

【解决方案1】：

正如错误所说，谷歌没有定义。使用 Cordova 时，您需要记住每个平台的浏览器支持可能不同（即使对于每个 Android 版本，我建议使用适用于 Android 的 Crosswalk），因此它可能没有定义全局 google 变量

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

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

【讨论】：