错误：“'PolygonOptions'仅指代一种类型，但在构建Android应用程序时用作值”（Node.js + Ionic native）

Question

我正在尝试为Android创建一个Ionic原生移动应用程序。我的标记显示在谷歌地图上，该部分有效。我也想在地图上显示多边形。

当我在命令提示符下给出ionic cordova build android命令时，我收到此错误：

            'PolygonOptions' only refers to a type, but is being used as a value
 here.

     L184:          this.map.addPolygon(new PolygonOptions().add(new LatLng(0,1)
, new LatLng(1,2)).strokeColor(Color.RED

[11:36:39]  typescript: C:.../src/pages/home/home.ts, line:
184
            Cannot find name 'Color'.

     L184:  n(new PolygonOptions().add(new LatLng(0,1), new LatLng(1,2)).strokeColor(Color.RED).fillColor(Color.BLUE));

[11:36:39]  typescript: C:.../src/pages/home/home.ts, line:
184
            Cannot find name 'Color'.

     L184:  n(new PolygonOptions().add(new LatLng(0,1), new LatLng(1,2)).strokeColor(Color.RED).fillColor(Color.BLUE));

Error: Failed to transpile program
    at new BuildError (C:...\node_modules\@ionic\app-scripts
\dist\util\errors.js:16:28)
    at C:...\node_modules\@ionic\app-scripts\dist\transpile.
js:159:20
    at new Promise (<anonymous>)
    at transpileWorker (C:...\node_modules\@ionic\app-script
s\dist\transpile.js:107:12)
    at Object.transpile (C:...\node_modules\@ionic\app-scrip
ts\dist\transpile.js:64:12)
    at C:...\node_modules\@ionic\app-scripts\dist\build.js:1
09:82
    at <anonymous>

我家的相关部分：

import { GoogleMapsProvider } from './../../providers/google-maps/google-maps';

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker,
  Polygon,
  PolygonOptions,
  BaseArrayClass,
  LatLng,
  LatLngBounds
} from '@ionic-native/google-maps';

import { Component, ElementRef } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
  map: GoogleMap;
  
  constructor(public navCtrl: NavController)
  { }

  loadPolygons() {
    this.map.addPolygon(new PolygonOptions().add(new LatLng(0,1), new 
    LatLng(1,2)).strokeColor(Color.RED).fillColor(Color.BLUE));
    }
}

Answer 1

试试这样，

createPolygon(_mpts: ILatLng[]){
    let polygOptions: PolygonOptions = {
      points: _mpts,
      strokeColor: '#e60000',
      strokeWidth: 3,
      visible: true
    };

    this.map.addPolygon(polygOptions).then( (_polyg : Polygon) => {

    }, err => {console.error(err);});
  }

Answer 2

要添加更多信息，

离子原生的PolygonOptions（ref ionic-native/src/@ionic-native/plugins/google-maps/index.ts）是一个接口，你不能使用new。但是你可以创建一个符合界面的对象。 （除了points之外的所有属性都在名称后面有?，这意味着它们是可选的）。

这是离子原生的来源，

export interface PolygonOptions {
  /**
   * Pass ILatLng[] to specify the vertixes.
   * You need to contain two points at least.
   */
  points: Array<ILatLng>;

  /**
   * Set true if you want to draw the curve polygon based on the earth
   * (default: false)
   */
  geodesic?: boolean;

  /**
   * Set the stroke color
   * (rgb, rgba, #RRGGBB, "colorname", ...etc)
   */
  strokeColor?: string;

  /**
   * Set the stroke width in pixel
   */
  strokeWidth?: number;

  /**
   * Set the inside color of polygon
   * (rgb, rgba, #RRGGBB, "colorname", ...etc)
   */
  fillColor?: string;

  /**
   * Set false if you want to create invisible polygon
   * (Invisible polygon is not clickable, default true)
   */
  visible?: boolean;

  /**
   * Hierarchy z-index
   */
  zIndex?: number;

  /**
   * Pass ILatLng[][] to create holes in polygon
   */
  addHole?: Array<Array<ILatLng>>;

  /**
   * Set true if you want to receive the POLYGON_CLICK event
   * (default: false)
   */
  clickable?: boolean;

  /**
   * Accept own properties
   * You can get the property later using `get()` method.
   */
  [key: string]: any;
}

令人困惑的是，这个页面Google APIs for Android - PolygonOptions将PolygonOptions显示为一个类（你可以new的实例），但它是Java而不是Javascript。