uber_像Uber这样的Android Google地图样式

最新推荐文章于 2024-09-23 18:46:25 发布

cunchi4221

最新推荐文章于 2024-09-23 18:46:25 发布

阅读量168

点赞数

原文链接：https://www.journaldev.com/31323/android-google-map-styles-like-uber

版权

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 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

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" />

    <Button
        android: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;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        button = findViewById(R.id.btnChangeStyle);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                setMapStyle();
            }
        });


        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }


    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        // Add a marker in Sydney and move the camera
        LatLng 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:

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