سفارشی سازی پایه نشانگر

پلتفرم را انتخاب کنید: 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',
});

جاوا اسکریپت

// 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",
});

برای افزودن متن عنوان به نشانگری که با استفاده از 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>

نشانگر را مقیاس کنید

برای اندازه گیری یک نشانگر، از گزینه 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,
});

جاوا اسکریپت

// 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,
});

رنگ پس زمینه را تغییر دهید

از گزینه 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,
});

جاوا اسکریپت

// 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,
});

رنگ حاشیه را تغییر دهید

از گزینه 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,
});

جاوا اسکریپت

// 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,
});

رنگ گلیف را تغییر دهید

از گزینه 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,
});

جاوا اسکریپت

// 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,
});

گلیف را مخفی کنید

گزینه 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,
});

جاوا اسکریپت

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

از طرف دیگر، PinElement.glyphColor را روی همان مقدار PinElement.background قرار دهید. این اثر پنهان کردن بصری گلیف را دارد.

مراحل بعدی: