我无法使用以下插件自定义地图: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"
}
]
}
];