إنشاء علامات باستخدام طرق عرض مخصّصة

صورة ثلاثية الأبعاد لمدينة نيويورك يظهر فيها مبنى إمباير ستيت مع ثلاث علامات رقمية مخصّصة تطفو فوقه، بما في ذلك غوريلا كرتونية تحمل تصنيفًا

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

إضافة علامة عرض مخصّصة

لإضافة علامة عرض مخصّصة إلى خريطتك، أنشئ مثيلاً من النوع MarkerViewOptions، واضبط موقعه باستخدام setPosition من خلال عنصر من النوع LatLngAltitude، وقدِّم View Android المخصّص باستخدام setContent. بعد ذلك، مرِّر الخيارات إلى addMarkerView في مثيل GoogleMap3D.

إذا لم توفّر طريقة عرض لـ setContent، تنشئ حزمة تطوير البرامج (SDK) PinView تلقائيًا وتعرضه.

// Add imports
import android.widget.TextView
import com.google.android.gms.maps3d.model.MarkerViewOptions
import com.google.android.gms.maps3d.model.latLngAltitude

// Create a custom Android View
val badgeView = TextView(context).apply {
    text = "Empire State Building"
    contentDescription = "Marker for Empire State Building"
    setPadding(24, 12, 24, 12)
}

// Configure MarkerViewOptions and add the marker view to the map
val options = MarkerViewOptions().apply {
    position = latLngAltitude {
        latitude = 40.7484
        longitude = -73.9857
        altitude = 100.0
    }
    content = badgeView
}

val markerView = googleMap3D.addMarkerView(options)

تخصيص PinView التلقائي

بدلاً من إنشاء View مخصّص بالكامل لنظام التشغيل Android، يمكنك عرض دبوس مخصّص من خلال إنشاء PinView مع PinConfiguration مخصّص (أو تعديل مثيل حالي باستخدام setPinConfiguration) وتمريره إلى setContent.

// Add imports
import android.graphics.Color
import com.google.android.gms.maps3d.model.MarkerViewOptions
import com.google.android.gms.maps3d.model.PinView
import com.google.android.gms.maps3d.model.latLngAltitude
import com.google.android.gms.maps3d.model.pinConfiguration

// Create a customized PinView
val customPinView = PinView(context, pinConfiguration {
    backgroundColor = Color.BLUE
    borderColor = Color.WHITE
})

// Configure MarkerViewOptions and add the marker view to the map
val options = MarkerViewOptions().apply {
    position = latLngAltitude {
        latitude = 40.7484
        longitude = -73.9857
        altitude = 100.0
    }
    content = customPinView
}

val markerView = googleMap3D.addMarkerView(options)

التعامل مع التفاعلات والرسوم المتحركة

بما أنّ MarkerView يغلّف View في Android، يمكنك ربط متتبِّعات النقرات العادية وعرض الرسوم المتحركة مباشرةً بالعرض الذي تم عرضه بواسطة getContent.

بالإضافة إلى ذلك، MarkerView تنفّذ Anchorable، ما يتيح لك تثبيت Popover في عرض العلامة باستخدام addPopover:

markerView?.content?.setOnClickListener { view ->
    // Animate the view when clicked
    view.animate().rotationBy(90f).setDuration(300).start()
}

ضبط الارتفاع وسلوك التصادم

يمكنك تخصيص كيفية تحديد موضع MarkerView عموديًا وكيفية تفاعله مع تصنيفات الخريطة أو العلامات المتداخلة:

إمكانية الوصول والإزالة

تتحمّل أنت مسؤولية ضبط خصائص تسهيل الاستخدام، مثل contentDescription، على جهاز Android المخصّص View الذي يتم توفيره إلى setContent.

لإزالة MarkerView من الخريطة، استخدِم الدالة remove:

markerView?.remove()