ios - 使用 NativeScript 在 iOS 上设置谷歌地图样式

Question

我目前正在使用 this在我的 NativeScript 应用程序中集成 Google map 的插件。他们有办法为 Android 更新 map 样式 (shown here)但我找不到任何代码来更新 iOS 上的 map 样式。

我还找到了this有人早些时候问过这个问题，但它没有提到任何 iOS 细节。

我还发现这些文档引用了 gMAP 的 iOS 使用，但我不知道如何使用这些信息让它在我的 NativeScript 应用程序中运行。

有人在 iOS 上成功更改过 map 的颜色吗？

这是我当前的代码:

import { MapStyles } from "./map-style";
declare var com:any; //Typescript workaround

onMapReady(args): void {
    this.mapView = args.object;

    if (isAndroid) {
        this.mapView.gMap.setMapStyle(new com.google.android.gms.maps.model.MapStyleOptions(JSON.stringify(MapStyles)));
    }

    if (isIOS) {
        // style map for iOS
    }
}

Answer 1

我能够使用相同的代码为 iOS 和 Android 设置样式:

this.mapView.setStyle(<Style>JSON.parse(this.currentMapStyle));

注意:Style类是从 nativescript-google-maps-sdk 导入的和 this.currentMapStyle是我使用此生成的字符串成员:https://mapstyle.withgoogle.com/

编辑
我将 Nativescript 与 Angular2 和 nativescript-google-maps-sdk 的 1.4.3 版一起使用.我的onMapReady函数看起来像这样:

private onMapReady(args): void {
    this.mapView = args.object;
    let mapStyle = '[{"elementType":"geometry","stylers":[{"color":"#242f3e"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#746855"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#242f3e"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#263c3f"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#6b9a76"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#38414e"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#212a37"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#9ca5b3"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#746855"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#1f2835"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#f3d19c"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#2f3948"}]},{"featureType":"transit.station","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#17263c"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#515c6d"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#17263c"}]}]'

    this.mapView.setStyle(<Style>JSON.parse(mapStyle));
}