نمادها (نمادهای برداری)

  1. مقدمه
  2. مشخصه‌های نماد
  3. نمادهای ازپیش تعریف‌شده
  4. افزودن نماد به نشانگر
  5. افزودن نماد به چندخطی
  6. پویانمایی نماد

مقدمه

Symbol نمادی برداری است که می‌تواند روی Marker یا Polyline شیء نمایش داده شود. شکل نماد بااستفاده از مسیر در نشانه‌گذاری مسیر SVG تعریف می‌شود. اگرچه path تنها دارایی الزامی است، شیء Symbol از انواع مختلف دارایی‌ها پشتیبانی می‌کند که به شما امکان می‌دهد جنبه‌های بصری را سفارشی‌سازی کنید، مثلاً رنگ و ضخامت خط و پر کردن. فهرست دارایی‌ها را ببینید.

چندین نماد ازپیش تعریف‌شده ازطریق کلاس SymbolPath دردسترس است. فهرست را در زیر ببینید.

خصوصیات نماد

توجه داشته باشید که رفتار پیش‌فرض Symbol بسته به اینکه روی نشانگر یا چندخطی ظاهر شود کمی متفاوت است. این تفاوت‌ها در فهرست خصوصیات زیر شرح داده شده است.

‫Symbol از دارایی‌های زیر پشتیبانی می‌کند:

  • ‫path (الزامی) مسیری است که شکل نماد را تعریف می‌کند. می‌توانید از یکی از مسیرهای پیش‌تعریف‌شده در google.maps.SymbolPath استفاده کنید یا بااستفاده از نشانه‌گذاری مسیر SVG مسیر سفارشی تعریف کنید. توجه: مسیرهای برداری در یک چندخط باید در یک مربع ۲۲x۲۲ پیکسل جا بگیرند. اگر مسیر شما شامل نقاطی خارج از این مربع است، باید دارایی scale نماد را به مقدار کسری، مثلاً ۰٫۲، تنظیم کنید تا نقاط مقیاس‌بندی‌شده حاصل در مربع جا بگیرد.
  • anchor موقعیت نماد را نسبت‌به نشانگر یا چندخطی تنظیم می‌کند. مختصات مسیر نماد به‌ترتیب با مختصات x و y لنگر به چپ و بالا ترجمه می‌شود. به‌طور پیش‌فرض، نمادی در (0, 0) لنگر می‌شود. موقعیت در همان سیستم مختصات مسیر نماد بیان می‌شود.
  • fillColor رنگ پرکننده نماد است (یعنی منطقه‌ای که با خط حاشیه محدود شده است). همه رنگ‌های CSS3 به‌جز رنگ‌های نام‌دار گسترده پشتیبانی می‌شوند. برای نمادهای روی نشانگرها، پیش‌فرض «سیاه» است. برای نمادهای روی چندخطی‌ها، پیش‌فرض رنگ ضربه چندخطی مربوطه است.
  • fillOpacity ماتی نسبی (یعنی عدم شفافیت) نماد را برای پر کردن تعریف می‌کند. مقادیر از ۰٫۰ (کاملاً شفاف) تا ۱٫۰ (کاملاً مات) متغیر است. پیش‌فرض ۰٫۰ است.
  • ‫rotation زاویه‌ای است که نماد باید با آن چرخانده شود، که به‌صورت ساعت‌گرد و با واحد درجه بیان می‌شود. به‌طور پیش‌فرض، نماد نشانگر چرخش ۰ دارد و نماد روی چندخطی با زاویه لبه‌ای که روی آن قرار دارد می‌چرخد. تنظیم چرخش نماد روی چندخطی باعث می‌شود چرخش نماد ثابت شود و دیگر از انحنای خط پیروی نکند.
  • ‫scale مقدار مقیاس نماد را براساس اندازه تنظیم می‌کند. برای نشانگرهای نماد، مقیاس پیش‌فرض ۱ است. پس‌از مقیاس‌بندی، نماد می‌تواند هر اندازه‌ای داشته باشد. برای نمادهای روی چندخطی، مقیاس پیش‌فرض وزن ضربه چندخطی است. پس‌از مقیاس‌بندی، نماد باید در یک مربع ۲۲x۲۲ پیکسل قرار گیرد، که در نقطه لنگر نماد مرکزیت دارد.
  • strokeColor رنگ خط پیرامونی نماد است. همه رنگ‌های CSS3 پشتیبانی می‌شوند به‌جز رنگ‌های نام‌دار گسترده. برای نمادهای روی نشانگرها، پیش‌فرض «سیاه» است. برای نمادهای روی چندخط، رنگ پیش‌فرض رنگ ضربه چندخط است.
  • ‫strokeOpacity میزان ماتی نسبی (یعنی عدم شفافیت) ضرب‌قلم نماد را تعیین می‌کند. مقادیر از ۰٫۰ (کاملاً شفاف) تا ۱٫۰ (کاملاً مات) متغیر است. برای نشانگرهای نماد، پیش‌فرض ۱٫۰ است. برای نمادهای چندخطی، حالت پیش‌فرض کدورت خط چندخطی است.
  • ‫strokeWeight وزن خطوط محیطی نماد را تعریف می‌کند. پیش‌فرض scale نماد است.

نمادهای ازپیش تعریف‌شده

‫Maps JavaScript API چند نماد داخلی ارائه می‌دهد که می‌توانید ازطریق کلاس SymbolPath به نشانگرها یا چندخطی‌ها اضافه کنید.

نمادهای پیش‌فرض شامل یک دایره و دو نوع پیکان است. هر دو پیکان رو به جلو و رو به عقب دردسترس هستند. این ویژگی به‌ویژه برای چندخطی‌ها مفید است، زیرا جهت نماد در چندخطی ثابت است. جهت به سمت پایانه چندخطی درنظر گرفته می‌شود.

بااستفاده از هریک از گزینه‌های نماد پیش‌فرض می‌توانید ضربه یا پر کردن نمادهای ازپیش تعریف‌شده را تغییر دهید.

نمادهای ازپیش تعریف‌شده زیر گنجانده شده است:

نام شرح مثال
google.maps.SymbolPath.CIRCLE دایره.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW پیکانی که به عقب اشاره می‌کند و از همه طرف بسته است.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW پیکانی که به جلو اشاره می‌کند و از همه طرف بسته است.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW پیکانی که به عقب اشاره می‌کند و از یک طرف باز است.
google.maps.SymbolPath.FORWARD_OPEN_ARROW پیکانی که به جلو اشاره می‌کند و از یک طرف باز است.

افزودن نماد به نشانگر

برای نمایش نماد برداری در AdvancedMarkerElement، از عنصر SVG XML استفاده کنید. مثال زیر نشان می‌دهد که چگونه یک عنصر SVG XML را به یک AdvancedMarkerElement اضافه کنید.

TypeScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

JavaScript

const parser = new DOMParser();

// A marker with a custom inline SVG.
const pinSvgString =
    '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';

const pinSvg = parser.parseFromString(
    pinSvgString,
    'image/svg+xml'
).documentElement;
const pinSvgMarker = new AdvancedMarkerElement({
    position: { lat: 37.42475, lng: -122.094 },
    title: 'A marker using a custom SVG image.',
    anchorLeft: '-50%',
    anchorTop: '-50%',
});
pinSvgMarker.append(pinSvg);
mapElement.append(pinSvgMarker);

افزودن نماد به چندخطی

برای نمایش نمادها در چندخط، ویژگی icons[] شیء PolylineOptions را تنظیم کنید. آرایه icons[] یک یا چند IconSequence لفظ شیء را با خصوصیات زیر می‌گیرد:

  • ‫icon (الزامی) نمادی است که در خط ارائه می‌شود.
  • offset فاصله از ابتدای خط را که در آن نماد باید پرداز شود تعیین می‌کند. این فاصله ممکن است به‌صورت درصدی از طول خط (برای مثال، «۵۰٪») یا به‌صورت پیکسل (برای مثال، «۵۰ پیکسل») بیان شود. پیش‌فرض «۱۰۰٪» است.
  • repeat فاصله بین نمادهای متوالی در خط را تعیین می‌کند. این فاصله ممکن است به‌صورت درصد از طول خط (برای مثال، «٪۵۰») یا در پیکسل (برای مثال، «۵۰ پیکسل») بیان شود. برای غیرفعال کردن تکرار نماد، «۰» را مشخص کنید. پیش‌فرض «۰» است.

با ترکیب نشان‌ها و کلاس PolylineOptions، کنترل زیادی بر ظاهر و احساس چندخطی‌ها در نقشه‌تان دارید. در زیر چند نمونه از سفارشی‌سازی‌هایی که می‌توانید اعمال کنید آورده شده است.

پیکان‌ها

از دارایی IconSequence.offset برای افزودن پیکان به شروع یا پایان چندخطی استفاده کنید.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

مشاهده مثال

خطوط نقطه‌چین

با تنظیم کدورت چندخطی به ۰ و رونهادن نماد کدر روی خط در فواصل منظم، می‌توانید به جلوه خط نقطه‌چین دست یابید.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

مشاهده مثال

مسیرهای سفارشی

نمادهای سفارشی به شما امکان می‌دهند اشکال مختلفی را به چندخطی اضافه کنید.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

مشاهده مثال

پویانمایی نماد

بااستفاده از تابع window.setInterval() در DOM می‌توانید نمادی را در امتداد یک مسیر پویانمایی کنید و در فواصل زمانی ثابت، انحراف نماد را تغییر دهید.

TypeScript

// This example adds an animated symbol to a polyline.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 20.291, lng: 153.027 },
      zoom: 6,
      mapTypeId: "terrain",
    }
  );

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.291, lng: 153.027 },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

window.initMap = initMap;
مشاهده مثال