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

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

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

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

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

إذا أردت تعديل النمط نفسه في تطبيقات متعددة، يمكنك الاطّلاع على التخصيص المستند إلى السحابة الإلكترونية، والذي يتوفّر في Google Cloud Console ويتطلب معرّف خريطة. لتجنُّب التعارضات المحتملة، لا تجمِع بين التخصيص المستند إلى السحابة الإلكترونية والتصميم المبرمَج في التطبيق نفسه.

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

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

استنسِخ أو نزِّل مستودع Google Maps Android API v2 Samples من GitHub.

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

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

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

4. استورِد مشروع البرنامج التعليمي:

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

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

لإكمال هذا الدليل التوجيهي، تحتاج إلى مفتاح واجهة برمجة تطبيقات من Google مُرخّص له باستخدام حزمة تطوير البرامج بالاستناد إلى بيانات خرائط Google للتطبيقات المتوافقة مع 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"، انقر على خيار القائمة تشغيل (Run) (أو رمز زر التشغيل). اختَر جهازًا عند المطالبة بذلك.

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

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

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

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

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

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

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

**ملاحظة:** يستخدم نموذج التطبيق الذي نزّلته من GitHub موردًا أوّليًا.

مورد أوّلي

حدِّد موردًا أوّليًا في /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 مع إعلانات الأنماط نفسها التي تتوافق مع Maps JavaScript API.

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

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

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