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

با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

نشانگرهای سه بعدی از دو کلاس برای تعریف نشانگرها استفاده می‌کنند: کلاس 3DMarkerElement پارامترهای اصلی ( position ، label و map ) را ارائه می‌کند و کلاس PinElement دارای گزینه‌هایی برای سفارشی‌سازی بیشتر است.

برای افزودن نشانگرها به نقشه، ابتدا باید کتابخانه نشانگر را بارگذاری کنید که کلاس های 3DMarkerElement و PinElement را ارائه می کند.

قطعه زیر کدی را برای ایجاد یک PinElement جدید نشان می دهد و سپس آن را روی یک نشانگر اعمال می کند:

const pinScaled = new PinElement({
  scale: 1.5,
});

const markerWithLabel = new Marker3DElement({
  position: { lat: 37.419, lng: -122.03 },
  label: 'Simple label'
});

در نقشه های ایجاد شده با استفاده از HTML، پارامترهای اساسی برای یک نشانگر با استفاده از عنصر gmp-marker-3d HTML اعلام می شود. هر شخصی سازی که از کلاس PinElement استفاده می کند باید به صورت برنامه نویسی اعمال شود. برای انجام این کار، کد شما باید عناصر gmp-marker-3d را از صفحه HTML بازیابی کند. قطعه زیر کدی را برای پرس و جو برای مجموعه ای از عناصر gmp-marker-3d نشان می دهد، سپس در نتایج تکرار می شود تا سفارشی سازی که در gmp-marker-3d اعلام شده است اعمال شود.

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

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

  markers[i].appendChild(pin.element);
}

این صفحه به شما نشان می دهد که چگونه نشانگرها را به روش های زیر سفارشی کنید:

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

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

برای مقیاس کردن یک نشانگر، از گزینه scale استفاده کنید:

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(pinScaled);

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

از گزینه PinElement.background برای تغییر رنگ پس زمینه یک نشانگر استفاده کنید:

// Change the background color.
const pinBackground = new PinElement({
  background: '#FBBC04',
});
const markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

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

از گزینه PinElement.borderColor برای تغییر رنگ حاشیه یک نشانگر استفاده کنید:

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerBorder = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
});

markerBorder.appendChild(pinBorder);

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

از گزینه PinElement.glyphColor برای تغییر رنگ علامت نشانگر استفاده کنید:

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerGlyph = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
});

markerGlyph.appendChild(pinGlyph);

متن را به یک گلیف اضافه کنید

از گزینه PinElement.glyph برای جایگزینی حروف پیش فرض با یک کاراکتر متنی استفاده کنید. حروف متنی PinElement با PinElement و رنگ پیش‌فرض آن مقیاس می‌شود با glyphColor پیش‌فرض PinElement مطابقت دارد:

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
});

markerGlyphText.appendChild(pinTextGlyph);

ارتفاع را تغییر دهید

از گزینه Marker3DElement.position.altitude همراه با Marker3DElement.altitudeMode و Marker3DElement.extruded برای تغییر ارتفاع نشانگر و افزودن یک خط اکسترود شده بین زمین و نشانگر استفاده کنید:

const marker = new Marker3DElement({
  position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
  altitudeMode: 'RELATIVE_TO_GROUND',
  extruded: true,
});

نشانگرها را حذف کنید

از Marker3DElement.remove() برای حذف نشانگرها از نقشه استفاده کنید:

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

مراحل بعدی

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