Ошибка: "PolygonOptions" относится только к типу, но используется как значение "при создании приложения для Android (Node.js + Ionic native)

Я пытаюсь создать родное мобильное приложение для Android. Мои маркеры отображаются на Google Maps, эта часть работает. Я хотел бы также показать полигоны на карте.

Когда я даю команду andon 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>

Соответствующая часть моего home.ts:

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));
    }
}

Источник

2 ответа

Решение

Попробуй вот так,

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);});
  }
Источник

Чтобы добавить дополнительную информацию,

Ионно-родные PolygonOptions (ref https://github.com/ionic-team/ionic-native/blob/196be026ea68aa3371b901d698bb1cf959a2dec5/src/%40ionic-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 API для Android - PolygonOptions показывает PolygonOptions как класс (который вы можете new до экземпляра), но это для Java, а не Javascript.

Источник
Другие вопросы по тегам