تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

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

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

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

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

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

للحصول على تجربة تصميم أكثر شمولاً، يمكنك بدلاً من ذلك استخدام تصميم JSON مع تصميم الخرائط باستخدام السحابة الإلكترونية، والذي يوفّر قائمة أكثر شمولاً من عناصر على الخريطة وخيارات تخصيص أكبر. لا يتوافق مخطّط JSON لتصميم الخرائط المستنِد إلى السحابة الإلكترونية مع الأنظمة القديمة التي تستخدم بيانات أنماط JSON المضمّنة. وهذا يعني أنّه لا يمكن استخدام ملف JSON الخاص بتصميم الخرائط باستخدام السحابة الإلكترونية مباشرةً في حزمة تطوير البرامج بالاستناد إلى بيانات خرائط Google للتطبيقات المتوافقة مع Android. ومع ذلك، يمكنك استيراد بيانات أنماط JSON المضمّنة إلى مخطّط JSON الخاص بميزة "تصميم الخرائط باستخدام السحابة الإلكترونية".

الحصول على الشفرة‏

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

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

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

نزِّل "استوديو Android" وثبِّته.
أضِف حزمة خدمات Google Play إلى Android Studio.
استنسِخ أو نزِّل مستودع نماذج Google Maps Android API v2 إذا لم تكن قد فعلت ذلك عند بدء قراءة هذا الدليل التعليمي.
استيراد مشروع الدليل التوجيهي:
- في "استوديو Android"، انقر على ملف > جديد > استيراد مشروع.
- انتقِل إلى الموقع الجغرافي الذي حفظت فيه مستودع نماذج الإصدار 2 من Google Maps Android API بعد تنزيله.
- ابحث عن مشروع StyledMap في هذا الموقع الجغرافي:
  PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
- اختَر دليل المشروع، ثم انقر على حسنًا. ينشئ "استوديو Android" الآن مشروعك باستخدام أداة الإصدار Gradle.

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

لإكمال هذا البرنامج التعليمي، تحتاج إلى مفتاح Google API مصرَّح له باستخدام حزمة تطوير البرامج بالاستناد إلى بيانات خرائط Google للتطبيقات المتوافقة مع Android.

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

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

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

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

عدِّل ملف gradle.properties الخاص بمشروعك.
الصِق مفتاح واجهة برمجة التطبيقات في قيمة السمة GOOGLE_MAPS_API_KEY. عند إنشاء تطبيقك، ينسخ Gradle مفتاح واجهة برمجة التطبيقات إلى ملف بيان Android الخاص بالتطبيق.
```
GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
```

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

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

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

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

إذا لم تظهر لك خريطة، تأكَّد من حصولك على مفتاح واجهة برمجة التطبيقات وإضافته إلى التطبيق، كما هو موضّح أعلاه. تحقَّق من تسجيل الدخول في Android Monitor في Android Studio بحثًا عن رسائل خطأ حول مفتاح واجهة برمجة التطبيقات.
استخدِم أدوات تصحيح الأخطاء في "استوديو Android" لعرض السجلّات وتصحيح أخطاء التطبيق.

فهم الرمز البرمجي

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

إضافة مرجع يحتوي على عنصر نمط JSON

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

مورد أوّلي

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

عرض/إخفاء ملف JSON

[
  {
    "featureType": "all",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#242f3e"
      }
    ]
  },
  {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -80
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#263c3f"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6b9a76"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#2b3544"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9ca5b3"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#1f2835"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#f3d19c"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2f3948"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#17263c"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#515c6d"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -20
      }
    ]
  }
]

مصدر السلاسل النصية

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

عرض/إخفاء ملف JSON

<resources>
  <string name="style_json">
  [
    {
      \"featureType\": \"all\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#242f3e\"
        }
      ]
    },
    {
      \"featureType\": \"all\",
      \"elementType\": \"labels.text.stroke\",
      \"stylers\": [
        {
          \"lightness\": -80
        }
      ]
    },
    {
      \"featureType\": \"administrative\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#746855\"
        }
      ]
    },
    {
      \"featureType\": \"administrative.locality\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"poi\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"poi.park\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#263c3f\"
        }
      ]
    },
    {
      \"featureType\": \"poi.park\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#6b9a76\"
        }
      ]
    },
    {
      \"featureType\": \"road\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#2b3544\"
        }
      ]
    },
    {
      \"featureType\": \"road\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#9ca5b3\"
        }
      ]
    },
    {
      \"featureType\": \"road.arterial\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#38414e\"
        }
      ]
    },
    {
      \"featureType\": \"road.arterial\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#212a37\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#746855\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#1f2835\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#f3d19c\"
        }
      ]
    },
    {
      \"featureType\": \"road.local\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#38414e\"
        }
      ]
    },
    {
      \"featureType\": \"road.local\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#212a37\"
        }
      ]
    },
    {
      \"featureType\": \"transit\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#2f3948\"
        }
      ]
    },
    {
      \"featureType\": \"transit.station\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#17263c\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#515c6d\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"labels.text.stroke\",
      \"stylers\": [
        {
          \"lightness\": -20
        }
      ]
    }
  ]
  </string>
</resources>

تمرير عنصر نمط 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) على النحو التالي:

إظهار/إخفاء ملف التنسيق

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

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://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="com.example.styledmap.MapsActivityRaw"
    map:cameraZoom="10" />

مصدر السلاسل النصية

تفترض عينة التعليمات البرمجية التالية أنّ مشروعك يحتوي على مصدر سلاسل نصية باسم 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) على النحو التالي:

إظهار/إخفاء ملف التنسيق

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://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="com.example.styledmap.MapsActivityString"
    map:cameraZoom="10" />

مزيد من المعلومات حول بيانات أنماط JSON

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

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

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

أداة تصميم الخرائط في "منصة خرائط Google"

إنشاء أنماط مخصّصة لواجهات برمجة تطبيقات "منصة خرائط Google"

استخدِم أداة تصميم الخرائط في "منصة خرائط Google" كطريقة سريعة لإنشاء عنصر تصميم JSON. تتيح حزمة تطوير البرامج بالاستناد إلى بيانات خرائط Google للتطبيقات المتوافقة مع Android استخدام بيانات الأنماط نفسها التي تتيحها واجهة برمجة تطبيقات JavaScript لخدمة "خرائط Google".

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

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

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

الحصول على الشفرة‏

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

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

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

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

فهم الرمز البرمجي

إضافة مرجع يحتوي على عنصر نمط JSON

مورد أوّلي

مصدر السلاسل النصية

تمرير عنصر نمط JSON إلى خريطتك

مورد أوّلي

مصدر السلاسل النصية

مزيد من المعلومات حول بيانات أنماط JSON

أداة تصميم الخرائط في "منصة خرائط Google"

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

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