样式属性不适用于离子插件

时间:2019-01-22 07:48:09

标签: angular typescript google-maps ionic3

我无法使用以下插件自定义地图:https://github.com/mapsplugin/cordova-plugin-googlemaps v2.4.6。我读到以前的版本使用的是Google Maps API V2,该版本不支持地图的样式化,但文档使用的版本是支持该版本的3个版本。

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  Marker,
  Environment,
  LatLng,
  CameraPosition,
} from '@ionic-native/google-maps';

import { mapStyle } from './mapStyle';

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

/**
 * Generated class for the MapComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'map',
  templateUrl: 'map.html'
})
export class MapComponent {

  @ViewChild('map') mapElement: ElementRef;

  map: GoogleMap;


  constructor(private _googleMaps: GoogleMaps) {

        // This code is necessary for browser
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'key',
      'API_KEY_FOR_BROWSER_DEBUG': 'key'
    });

  }

  ngAfterViewInit(){
    this.initMap();
  }

  initMap(){
    let element = this.mapElement.nativeElement;
    let loc: LatLng = new LatLng(41.895, 12.482);

    this.map = this._googleMaps.create(element,{ styles: mapStyle });

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
        this.moveCamera(loc);
    });
  }

  moveCamera(loc: LatLng){
    let options: CameraPosition<any> = {
      target: loc,
      zoom: 5,
      tilt: 30
    }
    this.map.moveCamera(options);
}



}

export const mapStyle = [
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#444444"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f2f2f2"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    }

];

0 个答案:

没有答案