uber

Have you ever noticed how Uber and other few popular location-based applications have a different style of Google Maps? Some times it looks even better than the default Google Map Style. Today we’ll see how to implement Google map styles in our Android Application.

您是否曾经注意到Uber和其他少数几个流行的基于位置的应用程序具有不同的Google Maps风格？ 有时它看起来甚至比默认的Google Map Style好。 今天，我们将看到如何在我们的Android应用程序中实现Google地图样式。

总览 (Overview)

We have discussed and implemented Google Maps in quite a few tutorials until now. Here’s a list of them:

到目前为止，我们已经在许多教程中讨论和实现了Google Maps。 以下是它们的列表：

• Android Google Maps Example TutorialAndroid Google Maps示例教程
• Android Google Maps API IntegrationAndroid Google Maps API集成
• Android Google Maps Current Location, Night Mode FeaturesAndroid Google Maps当前位置，夜间模式功能
• Android Google Map – Drawing Route Between two pointsAndroid Google Map –两点之间的绘图路线
• Android Google Map Street View ExampleAndroid Google Map Street View示例
• Google Static Maps AndroidGoogle静态地图Android

Android Studio provides a default template for Google Maps. Let’s use that.

Android Studio提供了Google Maps的默认模板。 让我们使用它。

As covered in the previous tutorials, you need to add the API key to use Google Maps from the Google Cloud Console.

如之前的教程所述，您需要添加API密钥才能从Google Cloud Console使用Google Maps。

To set Map styles we simply do the following on the instance of Google Map.

要设置地图样式，我们只需对Google Map实例执行以下操作。

mMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(this, "jsonPathGoesHere");

项目结构 (Project Structure)

Android Google Maps Style Project

Android Google Maps Style Project

The map styles are present in the raw folder JSON files. You can customize them or explore the various map styles from the web.

原始文件夹JSON文件中提供了地图样式。 您可以自定义它们或从Web浏览各种地图样式。

码 (Code)

The code for the activity_maps.xml is given below:

下面给出了activity_maps.xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><fragment xmlns:tools="https://schemas.android.com/tools"android:id="@+id/map"android:name="com.google.android.gms.maps.SupportMapFragment"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MapsActivity" /><Buttonandroid:id="@+id/btnChangeStyle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|center"android:text="CHANGE MAP STYLE"/></FrameLayout>

SupportMapFragment is used to showcase the map in the layout of our activity.

SupportMapFragment用于在我们的活动布局中展示地图。

The code for the MapsActivity.java class is given below:

下面给出了MapsActivity.java类的代码：

package com.journaldev.androidgooglemapsstyling;import android.content.res.Resources;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;
import com.google.android.gms.maps.model.MarkerOptions;public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {private GoogleMap mMap;private Button button;int[] rawArray = {R.raw.assasin_creed, R.raw.uber_style, R.raw.game_style, R.raw.vintage_style};int currentIndex = 0;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_maps);button = findViewById(R.id.btnChangeStyle);button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {setMapStyle();}});SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);mapFragment.getMapAsync(this);}@Overridepublic void onMapReady(GoogleMap googleMap) {mMap = googleMap;// Add a marker in Sydney and move the cameraLatLng sydney = new LatLng(-34, 151);mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));setMapStyle();}private void setMapStyle() {if (currentIndex == rawArray.length && rawArray.length != 0) {currentIndex = 0;}try {mMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(this, rawArray[currentIndex++]));} catch (Resources.NotFoundException e) {Log.e("MapsActivity", "Cannot find style.", e);}}}

Once the map is ready, the onMapReady gets triggered. Inside this, we set a dummy location marker. The setMapStyle is used to toggle through the various map styles stored in the array.

地图准备好后，onMapReady将被触发。 在其中，我们设置了一个虚拟位置标记。 setMapStyle用于切换存储在数组中的各种地图样式。

Let’s look at the output of the above application in action:

让我们看一下上面应用程序的输出：

Android Google Maps Styled Output

Android Google Maps样式输出

That brings an end to this quick tutorial on styling Google Maps in Android.

这结束了有关在Android中样式Google Maps的快速教程。

You can download the full source code from below or browse through it from our Github Repository.

您可以从下面下载完整的源代码，也可以从我们的Github存储库浏览它。

翻译自: https://www.journaldev.com/31323/android-google-map-styles-like-uber

uber