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

پلتفرم را انتخاب کنید: Android iOS JavaScript

نشانگرهای پیشرفته از دو کلاس برای تعریف نشانگرها استفاده می کنند: کلاس AdvancedMarkerElement عملکرد نشانگر پیش فرض را ارائه می دهد و PinElement دارای گزینه هایی برای سفارشی سازی بیشتر است. این صفحه به شما نشان می دهد که چگونه نشانگرها را به روش های زیر سفارشی کنید:

• متن عنوان را اضافه کنید
• نشانگر را مقیاس کنید
• رنگ پس زمینه را تغییر دهید
• رنگ حاشیه را تغییر دهید
• رنگ گلیف را تغییر دهید
• گلیف را مخفی کنید

شکل 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 Maps را بخوانید.

جاوا اسکریپت

// 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

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

از گزینه PinElement.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 Maps را بخوانید.

جاوا اسکریپت

// 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 Maps را بخوانید.

جاوا اسکریپت

// 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 Maps را بخوانید.

جاوا اسکریپت

// 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 Maps را بخوانید.

جاوا اسکریپت

// 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 Maps را بخوانید.

جاوا اسکریپت

// 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 قرار دهید. این اثر پنهان کردن بصری گلیف را دارد.

مراحل بعدی:

• ایجاد نشانگر با گرافیک