logo标签列表

如何设置谷歌地图加载瓦片的颜色？

androidgoogle-maps
17

地图上的明亮加载瓦片和暗色风格不太搭配。有没有办法改变加载瓦片颜色？

你尝试过简单地更改片段的背景颜色吗？ - MatPag
@MatPag 我尝试了，但没有帮助。 - raver
3
我担心实际上没有办法改变载入磁贴的颜色... :\ - MatPag
GMapOptions.backgroundColor在2.119中引入，您可以更改在瓦片加载之前出现的瓦片的背景颜色。 - Jon Goodwin
6个回答
4
您可以使用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);
        }

你可以从这个官方地图样式网站获取json文件，然后将该json文件放入你的应用程序原始文件夹中。
关于在Android中为地图添加样式的详细说明，可以参考官方网站。
示例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"
      }
    ]
  }
]
3

我曾经面临同样的问题，通过片段XML资源成功解决：

    <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"/>
该死，这实际上正在运行。 - Wachid Susilo
同样适用于MapView。这应该是被接受的答案。 - undefined
1

概念：

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

注意：叠加层是透明的，具有 x、y 和 z 轴。就像你面前的透明玻璃一样。

TileProvider提供瓦片，就像您将书放在透明玻璃下方一样，位于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是一个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;
            }
        };

你可以在这里查看完整的源代码。
嗯，谢谢，听起来很有希望。但是有些问题没有完全解决。图像（我替换了URL因为月亮返回404）出现在地图上方，虽然在标记下面。在你添加的源代码中，它是通过这个添加的： 'mMoonTiles = map.addTileOverlay(new TileOverlayOptions().tileProvider(tileProvider));'，而不是GroundOverlayOptions，它似乎没有使用tileProvider。 - Jakob Harteg
0

试试这个

map = new GMap2(document.getElementById("map"), { backgroundColor: "#000000" });
谢谢您的回答，但我正在为Android编写本地应用程序。 - raver
0
你在评论中说“我正在编写 Android 的原生应用程序”，但这与你的标签（android，google-maps）或标题或问题不符。
如果您正在使用 Ionic native 4.0 框架 ionicframework ，那么：
 setBackgroundColor(color); //Specifies the background color of the app.
1
“本地应用程序（本地应用）是为特定平台或设备开发的应用程序。” - 我使用Android SDK用Kotlin编写我的应用程序。 - raver
@raver 本地应用程序是在设备的CPU上运行而无需翻译的二进制文件，即Java在任何Android设备上都不是本地的（因为它被翻译了），库文件（例如.so）是本地的，可执行文件也是本地的。Jar文件不是本地的。如果你所说的是真的，那么一切可以在设备上运行的东西都是本地的，这使得这个术语毫无意义。 - Jon Goodwin
那么，我如何调用不使用像ionic这样的框架编写的应用程序？ - raver
@raver，“native”这个术语被过度使用，对于不同的人有不同的含义。当你使用它时，必须传达一个特定的含义，否则不要使用它。在我狭义的定义中，Ionic不是本地的（你不必为每个CPU编译它）。请参阅https://www.howtogeek.com/163759/what-does-it-mean-for-software-to-run-natively/。 - Jon Goodwin
你没有回答我的上一个问题：）。“原生安卓应用程序”是常用的术语，所以我将坚持使用它。 - raver
那么，如果我想调用一个没有使用像ionic这样的框架编写的应用程序，该怎么办？我不理解你的问题。但是你想表达什么意思呢？这很令人困惑，除非含义清晰，否则不要使用母语。无论如何，这不是辩论的地方，有stack overflow元站点可以讨论，例如https://meta.stackexchange.com。 - Jon Goodwin
0
在你的应用程序的“原始文件夹”中创建一个名为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));
谢谢您的时间，但是正如您的代码所述，这将更改标签的颜色而不是瓷砖的颜色。 - Jakob Harteg
@Jakob。不确定更改颜色，但是设置透明度可能可以解决您的问题。在地图上叠加透明瓷砖可能很有用，这样用户就可以看到叠加瓷砖下面的底图。 mTileOverlay = map.addTileOverlay(new TileOverlayOptions() .tileProvider(new UrlTileProvider() {...}) .transparency(0.5f)); 然后 mTileOverlay.setTransparency(0.5f - mTileOverlay.getTransparency());。 这将在“0.5f”和“0.0f”之间切换瓷砖覆盖层的透明度。 - H.P.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接