سيتوفّر تصميم الخريطة الجديد قريبًا على "منصة خرائط Google". يتضمن هذا التحديث على تصميم الخريطة لوحة ألوان تلقائية جديدة وتحسينات على تجارب الخرائط وسهولة الاستخدام. سيتم تعديل جميع أنماط الخرائط تلقائيًا في آذار (مارس) 2025. للمزيد من المعلومات عن مدى التوفّر وكيفية تفعيل الميزة في وقت سابق، يُرجى الاطّلاع على نمط الخريطة الجديد في "منصة خرائط Google".

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

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

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

لا تعمل ميزة "التنسيق" إلا على نوع الخريطة normal. لا يؤثّر التصميم في خرائط داخلية.

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

استنسِخ أو نزِّل مستودع "نماذج Google Maps Android API‏ 2" من GitHub.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إذا لم تظهر لك خريطة، تأكّد من أنّك حصلت على مفتاح واجهة برمجة التطبيقات وأضفته إليه. من خلال التطبيق، كما هو موضح أعلاه. اطّلِع على السجلّ في Android Monitor في "استوديو Android" للعثور على رسائل الخطأ المتعلّقة بمفتاح واجهة برمجة التطبيقات.
استخدِم أدوات تصحيح الأخطاء في "استوديو 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 للخرائط.

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

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