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

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

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

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

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

در نقشه‌هایی که با استفاده از HTML ایجاد می‌شوند، پارامترهای اساسی برای یک نشانگر با استفاده از عنصر HTML مربوط به gmp-marker-3d تعریف می‌شوند؛ هرگونه سفارشی‌سازی که از کلاس 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 markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);
index.js

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

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

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);
index.js

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

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

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);
index.js

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

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

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);
index.js

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

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

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);
index.js

تغییر ارتفاع

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

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});
index.js

حذف نشانگرها

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

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

مراحل بعدی

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