Stilli Harita Ekle

Platform seçin: Android iOS JavaScript

Bu eğiticide, Android uygulamanıza özel stile sahip bir haritayı nasıl ekleyeceğiniz gösterilmektedir. Eğitimde, özel stil örneği olarak gece modu kullanılır.

Stil seçenekleriyle standart Google harita stillerinin sunumunu özelleştirebilir, yollar, parklar, işletmeler ve diğer önemli yerler gibi özelliklerin görsel görünümünü değiştirebilirsiniz. Bu, haritanın belirli bileşenlerini vurgulayabileceğiniz veya haritanın, uygulamanızın stilini tamamlamasını sağlayabileceğiniz anlamına gelir.

Stil özelliği yalnızca normal harita türünde çalışır. Stil, iç mekan haritalarını etkilemez.

Kodu alın

GitHub'dan Google Haritalar Android API v2 Örnekleri deposunu klonlayın veya indirin.

Geliştirme projenizi oluşturun

Android Studio'da eğitim projesini oluşturmak için aşağıdaki adımları uygulayın.

  1. Android Studio'yu indirin ve yükleyin.
  2. Android Studio'ya Google Play Hizmetleri paketini ekleyin.
  3. Bu eğiticiyi okumaya başladığınızda bunu yapmadıysanız Google Haritalar Android API v2 Örnek deposunu klonlayın veya indirin.

  4. Eğitim projesini içe aktarın:

    • Android Studio'da Dosya > Yeni > Projeyi İçe Aktar'ı seçin.
    • İndirdikten sonra Google Haritalar Android API v2 Örnekleri deposunu kaydettiğiniz konuma gidin.
    • StyledMap projesini şu konumda bulun:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • Proje dizinini seçin ve ardından OK (Tamam) seçeneğini tıklayın. Android Studio artık Gradle oluşturma aracını kullanarak projenizi oluşturuyor.

Bir API anahtarı alma ve gerekli API'leri etkinleştirme

Bu eğiticiyi tamamlamak için Android için Haritalar SDK'sını kullanmak üzere yetkilendirilmiş bir Google API anahtarına ihtiyacınız vardır.

Anahtar almak ve API'yi etkinleştirmek için aşağıdaki düğmeyi tıklayın.

Anahtar Al

Daha fazla bilgi için API Anahtarı Alma kılavuzuna bakın.

API anahtarını uygulamanıza ekleme

  1. Projenizin gradle.properties dosyasını düzenleyin.

  2. API anahtarınızı GOOGLE_MAPS_API_KEY özelliğinin değerine yapıştırın. Uygulamanızı derlediğinizde Gradle, API anahtarını uygulamanın Android manifestine kopyalar.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE

Uygulamanızı derleyip çalıştırma

  1. Bilgisayarınıza bir Android cihaz bağlayın. Android cihazınızda geliştirici seçeneklerini etkinleştirmek ve sisteminizi cihazı algılayacak şekilde yapılandırmak için instructions uygulayın. (Alternatif olarak, sanal bir cihaz yapılandırmak için Android Virtual Device (AVD) Manager'ı kullanabilirsiniz. Bir emülatör seçerken Google API'lerini içeren bir görüntü seçtiğinizden emin olun. Daha fazla bilgi için başlangıç kılavuzuna bakın.)
  2. Android Studio'da, Çalıştır menü seçeneğini (veya oynat düğmesi simgesini) tıklayın. İstendiği şekilde bir cihaz seçin.

Android Studio, uygulamayı oluşturmak için Gradle'ı çağırır ve daha sonra, uygulamayı cihazda veya emülatörde çalıştırır. Bu sayfadaki resme benzer şekilde, stilini koyu (gece modu) olan bir harita görürsünüz.

Sorun giderme:

Kodu anlama

Eğiticinin bu bölümünde, benzer bir uygulamayı nasıl oluşturacağınızı anlamanıza yardımcı olmak için StyledMap uygulamasının en önemli bölümleri açıklanmaktadır.

JSON stil nesnesi içeren bir kaynak ekleyin

Geliştirme projenize, stil bildirimlerinizi JSON biçiminde içeren bir kaynak ekleyin. Aşağıdaki örneklerde gösterildiği gibi ham kaynak veya dize kullanabilirsiniz.

Ham kaynak

/res/raw/style_json.json ürününde gece modu stili için JSON stil bildirimini içeren ham bir kaynak tanımlayın:

Dize kaynağı

/res/values/style_strings.xml ürününde gece modu stili için JSON stil bildirimini içeren bir dize kaynağı tanımlayın. Bu eğiticide style_json dize adı kullanılmıştır. Bu dosyada tırnak işaretlerinin önüne geçmek için ters eğik çizgi kullanmanız gerekir:

Haritanıza JSON stili bir nesne iletme

Haritanızın stilini belirlemek için GoogleMap.setMapStyle() yöntemini çağırarak stil bildirimlerinizi JSON biçiminde içeren bir MapStyleOptions nesnesi iletin.

Ham kaynak

Aşağıdaki kod örneğinde, projenizin style_json adlı bir ham kaynak içerdiği varsayılmaktadır:

// Copyright 2020 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.util.Log;
import androidx.appcompat.app.AppCompatActivity;

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)));
    }
}

Düzen (activity_maps_raw.xml) aşağıdaki gibi görünür:

Dize kaynağı

Aşağıdaki kod örneğinde, projenizin style_json adlı bir dize kaynağı içerdiği varsayılmaktadır:

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)));
    }
}

Düzen (activity_maps_string.xml) aşağıdaki gibi görünür:

JSON stili bildirimleri hakkında daha fazla bilgi

Stilli haritalar, bir haritaya renk ve diğer stil değişikliklerini uygulamak için iki kavramdan yararlanır:

  • Seçiciler, haritada biçimlendirebileceğiniz coğrafi bileşenleri belirtir. Bunlar arasında yollar, parklar, su kaynakları ve daha fazlası ile etiketleri bulunur. Seçiciler, featureType ve elementType özellikleri olarak belirtilen özellikler ile öğeleri içerir.
  • Stilleyiciler, harita öğelerine uygulayabileceğiniz renk ve görünürlük özellikleridir. Gösterilen rengi ton, renk ve açıklık/gama değerlerinin bir kombinasyonuyla tanımlarlar.

JSON stil seçeneklerinin ayrıntılı açıklaması için stil referansı bölümüne bakın.

Haritalar Platformu Stil Sihirbazı

Google Haritalar Platformu API'leri için özel stiller oluşturma

JSON stil nesnesi oluşturmanın hızlı bir yolu olarak Haritalar Platformu Stil Sihirbazı'nı kullanın. Android için Haritalar SDK'sı, Maps JavaScript API ile aynı stil bildirimlerini destekler.

Sonraki adım

Stil ekleyerek haritadaki özelliklerin nasıl gizleneceğini öğrenin.