إضافة خريطة ذات أنماط

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
اختَر النظام الأساسي: Android iOS JavaScript

يوضّح لك هذا البرنامج التعليمي كيفية إضافة خريطة بتصميم مخصّص إلى تطبيق Android. ويستخدم البرنامج التعليمي الوضع الليلي كمثال على النمط المخصّص.

باستخدام خيارات النمط، يمكنك تخصيص طريقة عرض أنماط خريطة Google العادية، وتغيير العرض المرئي للميزات مثل الطرق والمتنزهات والأنشطة التجارية ونقاط الاهتمام الأخرى. وهذا يعني أنه يمكنك إبراز عناصر معينة من الخريطة أو جعل الخريطة تتكامل مع نمط تطبيقك.

لا يعمل أسلوب الضبط إلا على نوع الخريطة normal. لا يؤثر التصميم على الخرائط الداخلية.

الحصول على الرمز‏

نسخ أو تنزيل مستودع الإصدار الثاني من Google Maps Android API من GitHub.

إعداد مشروع التطوير

اتّبِع هذه الخطوات لإنشاء المشروع التعليمي في "استوديو Android".

  1. نزِّل "استوديو Android" وثبِّته.
  2. أضِف حزمة خدمات Google Play إلى "استوديو Android".
  3. نسخ أو تنزيل مستودع الإصدار الثاني من Google Maps Android API إذا لم تفعل ذلك عند بدء قراءة هذا البرنامج التعليمي.
  4. استيراد مشروع البرنامج التعليمي:

    • في "استوديو Android"، اختَر File > New > Import Project.
    • انتقِل إلى المكان الذي حفظت فيه الإصدار 2.2 من عيّنة Google Maps Android API بعد تنزيله.
    • ابحث عن مشروع StyledMap في هذا الموقع:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • اختَر دليل المشروع، ثم انقر على OK (حسنًا). يُنشئ Android Studio مشروعك باستخدام أداة إنشاء Gradle.

الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل واجهات برمجة التطبيقات اللازمة

لإكمال هذا البرنامج التعليمي، تحتاج إلى مفتاح Google API تم تفويضه لاستخدام حزمة تطوير البرامج (SDK) للخرائط لنظام التشغيل Android.

انقر على الزر أدناه للحصول على مفتاح وتفعيل واجهة برمجة التطبيقات.

الحصول على مفتاح

ولمزيد من التفاصيل، يُرجى الاطّلاع على دليل الحصول على مفتاح واجهة برمجة التطبيقات.

أضِف مفتاح واجهة برمجة التطبيقات إلى تطبيقك

  1. عدِّل ملف gradle.properties الخاص بمشروعك.
  2. الصِق مفتاح واجهة برمجة التطبيقات في قيمة السمة GOOGLE_MAPS_API_KEY. عند إنشاء تطبيقك، تنسخ Gradle مفتاح واجهة برمجة التطبيقات في بيان Android على التطبيق.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

إنشاء تطبيقك وتشغيله

  1. اربط جهاز Android بجهاز الكمبيوتر. يمكنك اتّباع التعليمات لتفعيل خيارات المطوّرين على جهازك الذي يعمل بنظام التشغيل Android وإعداد نظامك لرصد الجهاز. (بدلاً من ذلك، يمكنك استخدام مدير جهاز Android الافتراضي (AVD) لضبط جهاز افتراضي. عند اختيار محاكي، احرص على اختيار صورة تتضمن Google APIs. لمزيد من التفاصيل، اطّلِع على دليل البدء.)
  2. في "استوديو Android"، انقر على الخيار تشغيل (أو رمز زر التشغيل). اختَر جهازًا كما هو مطلوب.

يستدعي Android Studio تطبيق Gradle لإنشاء التطبيق، ثم يشغِّل التطبيق على الجهاز أو على المحاكي. من المفترض أن تظهر لك خريطة بنمط داكن (الوضع الليلي)، مشابهة للصورة في هذه الصفحة.

تحرّي الخلل وإصلاحه:

فهم الرمز

يشرح هذا الجزء من البرنامج التعليمي الأجزاء الأكثر أهمية من تطبيق StyledMaps، لمساعدتك على فهم كيفية إنشاء تطبيق مشابه.

إضافة مورد يحتوي على كائن نمط JSON

أضِف موردًا إلى مشروع التطوير، ويحتوي على تعريفات النمط بتنسيق JSON. يمكنك استخدام سلسلة أولية أو سلسلة، كما هو موضّح في الأمثلة أدناه.

الموارد الأولية

حدِّد موردًا أوليًا في /res/raw/style_json.json، يحتوي على تعريف نمط JSON لتصميم الوضع الليلي:

مرجع السلسلة

حدِّد موردًا لسلسلة في /res/values/style_strings.xml، يحتوي على تعريف نمط JSON لتصميم الوضع الليلي. يستخدم هذا البرنامج التعليمي اسم السلسلة style_json. وفي هذا الملف، عليك استخدام شرطة مائلة للخلف للهروب من علامات الاقتباس:

تمرير كائن نمط JSON إلى خريطتك

لتصميم نمط الخريطة، اطلب من GoogleMap.setMapStyle() تمرير كائن MapStyleOptions يحتوي على تصريحات النمط بتنسيق JSON.

الموارد الأولية

يفترض نموذج الرمز التالي أن مشروعك يحتوي على مورد أولي اسمه style_json:

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

يبدو التنسيق (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

تستخدم الخرائط ذات النمطين مفهومين لتطبيق الألوان وتغييرات الأنماط الأخرى على الخريطة:

  • تحدّد أداة الاختيار المكوّنات الجغرافية التي يمكنك تصميمها على الخريطة. وتشمل هذه الطرق الطرق والمتنزهات والمسطّحات المائية وغيرها، بالإضافة إلى تصنيفاتها. تتضمن أدوات الاختيار ميزات وعناصر، محدّدة كسمات featureType وelementType.
  • مصفّفات النمط هي خصائص اللون وإذن الدخول التي يمكنك تطبيقها على عناصر الخريطة. وهي تحدد اللون المعروض من خلال مزيج من قيم اللون واللون والإضاءة/غاما.

راجِع مرجع النمط للحصول على وصف تفصيلي لخيارات نمط JSON.

معالج أنماط النظام الأساسي للخرائط

يمكنك استخدام معالج نمط النظام الأساسي للخرائط كطريقة سريعة لإنشاء كائن نمط JSON. تتوافق حزمة تطوير البرامج (SDK) للخرائط المتوفّرة لنظام التشغيل Android مع إعلانات النمط نفسها المتوفّرة في واجهة برمجة تطبيقات JavaScript للخرائط.

الخطوة التالية

يمكنك الاطّلاع على كيفية إخفاء الميزات على الخريطة باستخدام الأنماط.