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

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

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

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

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

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

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

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

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

اتبع الخطوات التالية لإنشاء المشروع التعليمي في Android Studio.

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

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

لإكمال هذا البرنامج التعليمي، تحتاج إلى مفتاح Google API مصرح له باستخدام حزمة SDK للخرائط لنظام التشغيل 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 Studio أداة Gradle لإنشاء التطبيق، ثم يشغل التطبيق على الجهاز أو على المحاكي. يُفترض أن ترى خريطة بنمط داكن (الوضع الليلي)، تشبه الصورة في هذه الصفحة.

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

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

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

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

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