تخصيص العلامة الأساسية

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

تستخدم العلامات المتقدمة فئتَين لتحديد العلامات: توفّر الفئة AdvancedMarkerElement المعلَمات الأساسية (position وtitle وmap)، بينما تحتوي الفئة PinElement على خيارات للتخصيص الإضافي. يعرض المقتطف التالي رمزًا لإنشاء PinElement جديد، ثم طبِّقه على علامة.

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

في الخرائط التي تم إنشاؤها باستخدام HTML، يتم الإعلان عن المعلَمات الأساسية للعلامة التجارية باستخدام عنصر HTML gmp-advanced-marker، وبالتالي يجب أن يتم تطبيق أي تخصيص يستخدم الفئة PinElement بشكل آلي. للقيام بذلك، يجب أن يسترد الرمز الخاص بك عناصر gmp-advanced-marker من صفحة HTML. يعرض المقتطف التالي رمزًا لطلب البحث عن مجموعة من عناصر gmp-advanced-marker، ثم يكرّر النتائج لتطبيق التخصيص الذي تم تعريفه في PinElement.

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.appendChild(pin.element);
}

توضح هذه الصفحة كيفية تخصيص محددات المواقع بالطرق التالية:

• إضافة نص العنوان
• تحجيم العلامة
• تغيير لون الخلفية
• تغيير لون الحدود
• تغيير لون الحرف الرسومي
• إخفاء الحرف الرسومي

الشكل 1: أجزاء العلامة المتقدّمة.

أضف نص العنوان

يظهر نص العنوان عند تمرير المؤشر فوق محدّد موقع. يمكن قراءة نص العنوان بواسطة برامج قراءة الشاشة.

لإضافة نص العنوان بشكل آلي، استخدِم الخيار AdvancedMarkerElement.title:

  
  
  
  
  
  

  

     
TypeScript
      
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
index.ts
    

      ملاحظة: يمكنك قراءة الدليل حول استخدام TypeScript و"خرائط Google".
    
    
    

    
JavaScript
      
  
  
  
 
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js
    


لإضافة نص عنوان إلى علامة تم إنشاؤها باستخدام HTML، استخدِم السمة title:

  
  
  
  
<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

تغيير حجم العلامة

لقياس علامة، استخدم الخيار scale.


  
  
  
  
  
  

  

     
TypeScript
     
// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts
    

      ملاحظة: يمكنك قراءة الدليل حول استخدام TypeScript و"خرائط Google".
    
    
    

    
JavaScript
      
  
  
  
 
// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js
    


تغيير لون الخلفية

يمكنك استخدام الخيار PinElement.background لتغيير لون خلفية محدّد الموقع:


  
  
  
  
  
  

  

     
TypeScript
     
// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts
    

      ملاحظة: يمكنك قراءة الدليل حول استخدام TypeScript و"خرائط Google".
    
    
    

    
JavaScript
      
  
  
  
 
// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js
    


تغيير لون الحدود

يمكنك استخدام الخيار PinElement.borderColor لتغيير لون حدود العلامة:


  
  
  
  
  
  

  

     
TypeScript
     
// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinBorder.element,
});
index.ts
    

      ملاحظة: يمكنك قراءة الدليل حول استخدام TypeScript و"خرائط Google".
    
    
    

    
JavaScript
      
  
  
  
 
// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.03 },
  content: pinBorder.element,
});
index.js
    


تغيير لون الحرف الرسومي

يمكنك استخدام الخيار PinElement.glyphColor لتغيير لون الحرف الرسومي لعلامة ما:


  
  
  
  
  
  

  

     
TypeScript
     
// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.02 },
    content: pinGlyph.element,
});
index.ts
    

      ملاحظة: يمكنك قراءة الدليل حول استخدام TypeScript و"خرائط Google".
    
    
    

    
JavaScript
      
  
  
  
 
// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.02 },
  content: pinGlyph.element,
});
index.js
    


إخفاء الحرف الرسومي

اضبط خيار PinElement.glyph على سلسلة فارغة لإخفاء الحرف الرسومي للعلامة:


  
  
  
  
  
  

  

     
TypeScript
     
// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.01 },
    content: pinNoGlyph.element,
});
index.ts
    

      ملاحظة: يمكنك قراءة الدليل حول استخدام TypeScript و"خرائط Google".
    
    
    

    
JavaScript
      
  
  
  
 
// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinNoGlyph.element,
});
index.js
    


ويمكنك بدلاً من ذلك ضبط PinElement.glyphColor على القيمة نفسها المُستخدَمة في PinElement.background.
هذا له تأثير إخفاء الحرف الرسومي بصريًا.

الخطوات اللاحقة:


إنشاء علامات بالرسومات


  

  

  


  

  
    
      
    
    
      
    
    
  
       
         

  
  
    
    إرسال ملاحظات