يشرح لك هذا الدليل التعليمي كيفية إضافة خريطة بالنمط المخصّص إلى جهاز Android. التطبيق. يستخدم الدليل التوجيهي ميزة الوضع الليلي كمثال على التصميم المخصّص.
باستخدام خيارات النمط، يمكنك تخصيص عرض خريطة Google القياسية تغيير طريقة العرض المرئي لخصائص مثل الطرق والمنتزهات والأنشطة التجارية ونقاط الاهتمام الأخرى. هذا يعني أنه يمكنك التأكيد على مكونات معينة من الخريطة أو تجعل الخريطة تكمل نمط التطبيق.
لا يعمل التصميم إلا على نوع الخريطة normal
. لا يؤثّر التصميم في
خرائط داخلية.
الحصول على الرمز
استنساخ أو تنزيل مستودع نماذج واجهة برمجة تطبيقات Android API في "خرائط Google" من GitHub.
إعداد مشروع التطوير
اتّبِع الخطوات التالية لإنشاء مشروع تعليمي في "استوديو Android".
- نزِّل "استوديو Android" وثبِّته.
- إضافة حزمة خدمات Google Play إلى Android استوديو YouTube.
- استنساخ أو تنزيل مستودع نماذج واجهة برمجة تطبيقات Android API في "خرائط Google" إذا لم تكن قد قمت بذلك عندما بدأت قراءة هذا البرنامج التعليمي.
استيراد مشروع الدليل التعليمي:
- في "استوديو Android"، اختَر ملف > جديد > استيراد المشروع:
- انتقل إلى الموقع الذي تم فيه حفظ نماذج واجهة برمجة تطبيقات Android API لخرائط Google المستودع بعد تنزيله.
- ابحث عن مشروع StyledMap في هذا الموقع:
PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
- اختَر دليل المشروع، ثم انقر على حسنًا. إصدار Android Studio مشروعك، باستخدام أداة إنشاء 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 APIs. لمزيد من التفاصيل، يُرجى مراجعة دليل البدء).
- في "استوديو Android"، انقر على خيار القائمة تشغيل (أو رمز زر التشغيل). اختَر جهازًا كما هو مطلوب.
يستدعي Android Studio تطبيق Gradle لإنشاء التطبيق، ثم يشغِّله على الجهاز أو على المحاكي. من المفترض أن تظهر لك خريطة مظلمة (الوضع الليلي). التصميم، مشابه للصورة الموجودة في هذه الصفحة.
تحرّي الخلل وإصلاحه:
- إذا لم تظهر لك خريطة، تأكّد من أنّك حصلت على مفتاح واجهة برمجة التطبيقات وأضفته إليه. من خلال التطبيق، كما هو موضح أعلاه. التحقّق من تسجيل الدخول في Android أداة Android Monitor في "استوديو YouTube" بحثًا عن رسائل الخطأ المتعلقة بمفتاح واجهة برمجة التطبيقات.
- استخدِم أدوات تصحيح الأخطاء في "استوديو Android" لعرض السجلات وتصحيح الأخطاء. التطبيق.
فهم الرمز البرمجي
يشرح هذا الجزء من البرنامج التعليمي أهم أجزاء StyledMap، لمساعدتك في فهم كيفية إنشاء تطبيق مشابه.
إضافة مورد يحتوي على كائن نمط 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.
معالِج تصميم النظام الأساسي في "خرائط Google"
يمكنك استخدام معالج أنماط النظام الأساسي للخرائط كطريقة سريعة لإنشاء كائن نمط JSON. تدعم حزمة تطوير البرامج بالاستناد إلى بيانات "خرائط Google" لنظام التشغيل Android النمط نفسه. باعتبارها واجهة برمجة تطبيقات JavaScript للخرائط.
الخطوة التالية
تعرَّف على كيفية إخفاء الميزات على الخريطة باستخدام الأنماط.