如何设置谷歌地图加载瓷砖颜色？

Question

深色风格的地图上的明亮加载图块看起来不太好。有没有办法改变加载瓷砖的颜色？

Answer 1

你可以用GoogleMap.setMapStyle换地图的主题，这样试试，

try {
            // Customise the styling of the base map using a JSON object defined
            // in a raw resource file.
            boolean success = googleMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }

您可以从此official map style site 获取 json 文件，并将该 json 文件放入您的应用程序原始文件夹中

在 android 中设置地图样式的完整说明，您可以参考 official site

示例style_json

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#212121"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#181818"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#1b1b1b"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#2c2c2c"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#8a8a8a"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#373737"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#3c3c3c"
      }
    ]
  },
  {
    "featureType": "road.highway.controlled_access",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#4e4e4e"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#000000"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#3d3d3d"
      }
    ]
  }
]

Answer 2

概念：

Tile 是一个矩形结构，它保存图像数据。 Tile (link) 由 TileProvider (link) 提供。 TileProvider 是一个为TileOverlay (link) 提供平铺图像的类。

注意：叠加层本质上是透明的，它有 x、y 和 z 轴。它就像你面前的透明玻璃。

TileProvider 在 TileOverlay 后面提供 Tile，就像您将书放在透明玻璃下方一样。在TileOverlay的z轴上，有GroundOverlays、Circles、Polylines和Polygons这样的层集。这意味着GroundOverlays 在最后一层，并且是最不透明的。您提供自定义图像并更改 GroundOverlay 中的颜色。您还可以维护所有其他顶层的透明度、可见性等属性。通过这种方式，您可以更改瓷砖颜色。

现在，您的主要任务是创建自定义的 GroundOverlay。 您的GroundOverlay 图像以BitmapDescriptor 的形式提供。您可以使用BitmapDescriptorFactory 创建您的自定义BitmapDescriptor 图像，如下所示。

BitmapDescriptor icon = BitmapDescriptorFactory.fromResource(R.drawable.current_position_tennis_ball) 

/* 你看，current_position_tennis_ball drawable resource，现在，你用作你的Tile 颜色 */

实施：

注意：MOON_MAP_URL_FORMAT 是enter code here jpg 图像，tileProvider 引用该图像（实际上是自定义图像）

private static final String MOON_MAP_URL_FORMAT =
                "http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/%d/%d/%d.jpg";

/* 提供上面明亮的 jpg */

    TileProvider tileProvider /* ultimately it is an image */ = new UrlTileProvider(256, 256) {
                @Override
                public synchronized URL getTileUrl(int x, int y, int zoom) {
                    // The moon tile coordinate system is reversed.  This is not normal.
                    int reversedY = (1 << zoom) - y - 1;
                    String s = String.format(Locale.US, MOON_MAP_URL_FORMAT, zoom, x, reversedY);
                    URL url = null;
                    try {
                        url = new URL(s);
                    } catch (MalformedURLException e) {
                        throw new AssertionError(e);
                    }
                return url;
            }
        };

你可以看到完整的源代码here。

Answer 3

试试这个

map = new GMap2(document.getElementById("map"), { backgroundColor: "#000000" });

Answer 4

您在评论中说“我正在为 android 编写本机应用程序”，但这并未反映在您的标签（android、google-maps）或标题或问题中。
如果你使用的是 Ionic native 4.0 Framework ionicframework 那么：

 setBackgroundColor(color); //Specifies the background color of the app.

Answer 5

在您的应用程序raw folder 中创建mapLabelStyle.json。将此 json 样式复制到该文件中。

[
  {
    "elementType": "labels",
    "stylers": [
      {
        "lightness": 5
      },
      {
        "visibility": "simplified"
      }
    ]
  },
  {
    "elementType": "labels.text",
    "stylers": [
      {
        "color": "#400040"           //You can change color of your choice
      }
    ]
  }
]

然后使用下面的代码设置样式。

GoogleMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(this,R.raw.mapLabelStyle));

Answer 6

我也遇到了同样的问题，通过片段 XML res 解决了这个问题：

    <fragment
    android:id="@+id/fragment_google_map"
    class="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:backgroundColor="@color/primaryBlue"/>