0

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


}
}
4

1 回答 1

0

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

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

If(window.google && window.google.maps){
// Current code
}
else if(plugin.google && plugin.google.maps){
// check the link above
}
于 2017-03-17T12:00:24.657 回答