Ionic Native Google 地图插件 - 设置应用背景颜色

Question

我在使用 Ionic 3 时遇到问题，特别是在使用本机 Google 地图插件时设置应用背景颜色。地图是浏览器的本机元素 "under"，为 Ionic 应用程序设置背景色会覆盖地图并阻止其显示。

When looking at the docs, Environment class 中有一个 setBackgroundColor(color) 方法，但我不知道我应该在哪里使用那个 class.有人知道吗？

Answer 1

好吧，我简单地实例化了Environment class 然后调用了setBackgroundColor。像这样：

import { Environment } from '@ionic-native/google-maps`;

export class MyClass {

  environment: Environment = null;

  myMethod(): void {
    this.environment = new Environment();
    this.environment.setBackgroundColor("red");
  }
}

Answer 2

哇。这让我有点惊讶。 @mkkekkonen 的回答当然有效，但这不是我预期的设计方式。（我是 cordova-plugin-googlemaps 的作者，也是 @ionic-native/google-maps 插件的主要维护者）。

环境、地理编码器、球形、多边形（哦，还没有实现）和编码 classes 在原始插件中是 static class。

例如，我认为没有人会这样做，但这是可能的。这不是我想要的方式。

import { Environment } from '@ionic-native/google-maps`;

export class MyClass {

  environment: Environment = null;

  myMethod1(): void {
    (new Environment()).setBackgroundColor("red");
  }
  myMethod2(): void {
    (new Environment()).setBackgroundColor("blue");
  }
}

正确的方法是使用provider (@4.3.3)

@IonicPage()
@Component({
  selector: 'page-set-background-color',
  templateUrl: 'set-background-color.html',
  providers: [
    Environment
  ]
})
export class SetBackgroundColorPage {

  map: GoogleMap;

  constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      public environment: Environment,
      public googleMaps: GoogleMaps) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SetBackgroundColorPage');
    this.map = this.googleMaps.create('map_canvas');
    this.environment.setBackgroundColor('red');
  }

}

请使用这种方式，mkkekkonen。我会在下一个版本中修复这个错误。

更新

在@ionic-native@4.3.4 之后的下一个版本中，代码将是这样的：

@IonicPage()
@Component({
  selector: 'page-set-background-color',
  templateUrl: 'set-background-color.html'
})
export class SetBackgroundColorPage {

  map: GoogleMap;

  constructor() {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SetBackgroundColorPage');
    this.map = GoogleMaps.create('map_canvas');
    Environment.setBackgroundColor('red');
  }

}

Ionic Native Google 地图插件 - 设置应用背景颜色

Ionic Native Google Maps plugin - set app background color

google-maps

ionic-framework

cordova-plugins

ionic-native