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

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

مقدمه

Symbol یک نماد مبتنی بر برداری است که می تواند روی یک Marker یا یک شی Polyline نمایش داده شود. شکل نماد با یک مسیر با استفاده از نماد مسیر SVG تعریف می شود. در حالی که path تنها ویژگی مورد نیاز است، شی Symbol از ویژگی‌های مختلفی پشتیبانی می‌کند که به شما امکان می‌دهد جنبه‌های بصری، مانند رنگ و وزن ضربه و پر را سفارشی کنید. لیست املاک را ببینید.

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

ویژگی های یک نماد

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

یک Symbol از ویژگی های زیر پشتیبانی می کند:

  • path ( لازم ) مسیری است که شکل نماد را مشخص می کند. می توانید از یکی از مسیرهای از پیش تعریف شده در google.maps.SymbolPath استفاده کنید یا یک مسیر سفارشی را با استفاده از نماد مسیر SVG تعریف کنید. توجه: مسیرهای برداری روی چند خط باید در یک مربع 22×22 پیکسل قرار گیرند. اگر مسیر شما شامل نقاط خارج از این مربع است، باید ویژگی scale نماد را به مقدار کسری مانند 0.2 تنظیم کنید تا نقاط مقیاس شده به دست آمده در مربع قرار بگیرند.
  • anchor موقعیت نماد را نسبت به نشانگر یا چند خط تعیین می کند. مختصات مسیر نماد به ترتیب توسط مختصات x و y لنگر به چپ و بالا ترجمه می شود. به طور پیش‌فرض، یک نماد در (0, 0) لنگر انداخته است. موقعیت در همان سیستم مختصاتی به عنوان مسیر نماد بیان می شود.
  • fillColor رنگ پر شدن نماد است (یعنی ناحیه ای که با سکته مغزی مرزی شده است). همه رنگ‌های CSS3 به جز رنگ‌های با نام توسعه‌یافته پشتیبانی می‌شوند. برای نمادهای روی نشانگرها، پیش‌فرض «سیاه» است. برای نمادهای روی چند خط، پیش‌فرض رنگ ضربه‌ای چند خط مربوطه است.
  • fillOpacity کدورت نسبی (یعنی عدم شفافیت) پر شدن نماد را تعریف می کند. مقادیر از 0.0 (کاملا شفاف) تا 1.0 (کاملاً مات) متغیر است. پیش فرض 0.0 است.
  • rotation زاویه چرخش نماد است که در جهت عقربه های ساعت بر حسب درجه بیان می شود. به‌طور پیش‌فرض، یک نشانگر نماد دارای چرخش 0 است و نماد روی چند خط با زاویه لبه‌ای که روی آن قرار دارد می‌چرخد. تنظیم چرخش یک نماد روی چند خط، چرخش نماد را به گونه‌ای ثابت می‌کند که دیگر از منحنی خط پیروی نمی‌کند.
  • scale مقدار اندازه نماد را تعیین می کند. برای نشانگرهای نماد، مقیاس پیش فرض 1 است. برای نمادهای روی چند خط، مقیاس پیش‌فرض وزن ضربه‌ای چند خط است. پس از مقیاس بندی، نماد باید در داخل یک مربع 22x22px قرار گیرد که در مرکز لنگر نماد قرار دارد.
  • strokeColor رنگ طرح کلی نماد است. همه رنگ‌های CSS3 به جز رنگ‌های با نام توسعه‌یافته پشتیبانی می‌شوند. برای نمادهای روی نشانگرها، پیش‌فرض «سیاه» است. برای نمادهای روی چند خط، رنگ پیش‌فرض رنگ خط چند خطی است.
  • strokeOpacity کدورت نسبی (یعنی عدم شفافیت) stroke نماد را تعیین می کند. مقادیر از 0.0 (کاملا شفاف) تا 1.0 (کاملاً مات) متغیر است. برای نشانگرهای نماد، پیش فرض 1.0 است. برای نمادهای روی چند خط، پیش‌فرض کدورت خط چند خطی است.
  • 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 یک فلش رو به جلو که از یک طرف باز است.

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

برای نمایش یک نماد مبتنی بر برداری بر روی یک نشانگر ، یک شی Symbol را به صورت تحت اللفظی با مسیر دلخواه به ویژگی icon نشانگر ارسال کنید. مثال زیر از نماد مسیر SVG برای ایجاد یک نماد سفارشی برای یک نشانگر استفاده می کند.

TypeScript 

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

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

جاوا اسکریپت 

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(0, 20),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
index.js
مشاهده نمونه

Sample را امتحان کنید

یک نماد را به چند خط اضافه کنید

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

  • icon ( الزامی ) نمادی است که باید روی خط ارائه شود.
  • offset فاصله از ابتدای خطی که یک نماد در آن قرار است ارائه شود را تعیین می کند. این فاصله ممکن است به صورت درصدی از طول خط (به عنوان مثال '50٪') یا در پیکسل (مثلا '50px') بیان شود. پیش فرض "100%" است.
  • repeat فاصله بین نمادهای متوالی روی خط را تعیین می کند. این فاصله ممکن است به صورت درصدی از طول خط (به عنوان مثال '50٪') یا در پیکسل (مثلا '50px') بیان شود. برای غیرفعال کردن تکرار نماد، "0" را مشخص کنید. پیش فرض "0" است.

با ترکیبی از نمادها و کلاس 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
});

مشاهده نمونه

خطوط شکسته

شما می توانید با تنظیم کدورت چند خط خود بر روی 0 و قرار دادن یک نماد مات روی خط در فواصل زمانی معین، به افکت خط چین دست پیدا کنید.

// 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;
index.ts

جاوا اسکریپت 

// 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;
index.js
مشاهده نمونه

Sample را امتحان کنید