您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps Android API

為協助您開始,我們將先引導您使用 Google Developers Console 來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps Android API
  3. 建立適當的金鑰
繼續

新增樣式化地圖

此教學課程示範如何將具有自訂樣式設定的地圖新增到您的 Android 應用程式。 課程中使用夜間模式做為自訂樣式設定的範例。

使用樣式選項可自訂標準 Google 地圖樣式的呈現方式,並變更特徵(例如道路、公園、商家與其他搜尋點)的視覺顯示。

這表示您可以強調地圖上的特定元件,或是讓地圖來補充應用程式的樣式。

樣式設定只在 normal 地圖類型上才有作用。

取得程式碼

從 GitHub 複製或下載 Google Maps Android API v2 Samples 存放區

設定開發專案

依照這些步驟操作,在 Android Studio 中建立教學課程專案。

  1. 下載安裝 Android Studio。
  2. 新增 Google Play 服務套件到 Android Studio。

  3. 複製或下載 Google Maps Android API v2 Samples 存放區 (如果您在開始閱讀此教學課程時沒有這樣做的話)。

  4. 匯入教學課程專案:

    • 在 Android Studio 中,選取 [File] > [New] > [Import Project]
    • 前往下載了 Google Maps Android API v2 Samples 存放區之後儲存它的位置。

    • 在此位置尋找 StyledMap 專案:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap

    • 選取專案目錄,然後按一下 [OK]。 Android Studio 現在會使用 Gradle 建罝工具建置您的專案。

取得 API 金鑰並啟用必要的 API

為了完成此教學課程,您需要一個 Google API 金鑰,而且此金鑰必須已獲得使用 Google Maps Android API 的授權。

按一下下面的按鈕,以取得金鑰並啟用 API。

取得金鑰

如需更多詳細資料,請參閱整份指南以取得 API 金鑰

將 API 金鑰新增到您的應用程式

  1. 編輯專案的 gradle.properties 檔案。
  2. 將 API 金鑰貼到 GOOGLE_MAPS_API_KEY 屬性的值中。 在建置應用程式時,Gradle 會將 API 金鑰複製到應用程式的 Android 宣示說明中。

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

建置並執行您的應用程式

  1. 將 Android 裝置連接到您的電腦。 依照操作說明啟用 Android 裝置上的開發人員選項,然後設定您的系統,以偵測該裝置 (或者,您可以使用 Android Virtual Device (AVD) Manager 來設定虛擬裝置。 選擇模擬器時,請務必挑選包含 Google API 的映像。 如需更多詳細資料,請參閱入門指南。)
  2. 在 Android Studio 中,按一下 [Run] 選單選項(或執行按鈕圖示)。 依照系統提示選擇裝置。

Android Studio 會叫用 Gradle 以建置應用程式,然後在裝置或模擬器上執行應用程式。 您應該會看到一個黑色(夜間模式)樣式的地圖,與此頁面上的影像類似。

疑難排解:

  • 如果您沒有看到地圖,請確認您已取得 API 金鑰並將它新增到應用程式,如上所述。 查看 Android Studio Android Monitor 中的記錄檔,以了解有關 API 金鑰的錯誤訊息。

  • 使用 Android Studio 偵錯工具檢視記錄檔並為應用程式偵錯。

了解程式碼

教學課程的此部分說明 StyledMap 應用程式中最重要的部分,協助您了解如何建置類似的應用程式。

新增包含 JSON 樣式物件的資源

新增資源到開發專案,資源中包含 JSON 格式的樣式宣告。 您可以使用原始資源或字串,如下面的範例中所示。

注意:您從 GitHub 下載的範例應用程式使用原始資源。

原始資源

定義 /res/raw/style_json.json 中的原始資源,它包含夜間模式樣式設定的 JSON 樣式宣告:

字串資源

定義 /res/values/style_strings.xml 中的字串資源,它包含夜間模式樣式的 JSON 樣式宣告。此教學課程使用字串名稱 style_json。在此檔案中,您需要使用反斜線來逸出問號:

將 JSON 樣式物件傳遞到地圖

要設定地圖的樣式,請呼叫 GoogleMap.setMapStyle(),並傳遞一個 MapStyleOptions 物件,其中包含 JSON 格式的樣式宣告。

原始資源

下列程式碼範例假設您的專案包含名為 style_json 的原始資源:

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

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;

/**
 * A styled map using JSON styles from a raw resource.
 */
public class MapsActivityRaw extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityRaw.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_raw);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        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);
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

版面配置 (activity_maps_raw.xml) 看起來像這樣:

字串資源

下列程式碼範例假設您的專案包含名為 style_json 的字串資源:

package com.example.styledmap;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

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;

/**
 * A styled map using JSON styles from a string resource.
 */
public class MapsActivityString extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityString.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_string);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        // Customise the styling of the base map using a JSON object defined
        // in a string resource file. First create a MapStyleOptions object
        // from the JSON styles string, then pass this to the setMapStyle
        // method of the GoogleMap object.
        boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources()
                .getString(R.string.style_json)));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

版面配置 (activity_maps_string.xml) 看起來像這樣:

有關 JSON 樣式宣告的更多資訊

樣式化地圖使用兩種概念將色彩與其他樣式變更套用到地圖:

  • 選取工具用來指定可在地圖上設定樣式的地理元件。 這些元件包括道路、公園、水域和其他,以及它們的標籤。 選取工具包含功能元素,分別以 featureTypeelementType 屬性指定。

  • 樣式工具是可套用到地圖元素的色彩與能見度屬性。 它們透過色調、色彩和光度/色差補正值的組合來定義顯示色彩。

請參閱樣式參考資料,了解 JSON 樣式設定選項的詳細描述。

Google Maps APIs Styling Wizard

使用 Google Maps APIs Styling Wizard 做為產生 JSON 樣式設定物件的快速方式。 Google Maps Android API 支援與 Google Maps JavaScript API 相同的樣式宣告。

下一個步驟

查看如何使用樣式設定來隱藏地圖上的特徵

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps Android API
Google Maps Android API
需要協助嗎?請前往我們的支援網頁