চিহ্ন (ভেক্টর-ভিত্তিক আইকন)

1. ভূমিকা
2. একটি প্রতীকের বৈশিষ্ট্য
3. পূর্বনির্ধারিত চিহ্ন
4. একটি মার্কার একটি প্রতীক যোগ করুন
5. একটি পলিলাইনে একটি প্রতীক যোগ করুন
6. একটি প্রতীক অ্যানিমেট

ভূমিকা

একটি Symbol একটি ভেক্টর-ভিত্তিক আইকন যা একটি Marker বা Polyline বস্তুতে প্রদর্শিত হতে পারে। প্রতীকের আকার SVG পাথ স্বরলিপি ব্যবহার করে একটি পাথ দ্বারা সংজ্ঞায়িত করা হয়। যদিও path একমাত্র প্রয়োজনীয় বৈশিষ্ট্য, Symbol অবজেক্টটি বিভিন্ন বৈশিষ্ট্য সমর্থন করে যা আপনাকে চাক্ষুষ দিকগুলিকে কাস্টমাইজ করতে দেয়, যেমন স্ট্রোকের রঙ এবং ওজন এবং ফিল। সম্পত্তির তালিকা দেখুন।

SymbolPath ক্লাসের মাধ্যমে বেশ কিছু পূর্বনির্ধারিত চিহ্ন পাওয়া যায়। নীচের তালিকা দেখুন.

একটি প্রতীকের বৈশিষ্ট্য

মনে রাখবেন যে একটি Symbol ডিফল্ট আচরণ এটি একটি মার্কার বা পলিলাইনে প্রদর্শিত হবে কিনা তার উপর নির্ভর করে সামান্য পরিবর্তিত হয়। এই বৈচিত্রগুলি নীচের বৈশিষ্ট্যগুলির তালিকায় বর্ণিত হয়েছে৷

একটি Symbol নিম্নলিখিত বৈশিষ্ট্য সমর্থন করে:

• path ( প্রয়োজনীয় ) হল পাথ যা প্রতীকের আকৃতি নির্ধারণ করে। আপনি google.maps.SymbolPath এ পূর্বনির্ধারিত পাথগুলির একটি ব্যবহার করতে পারেন বা SVG পাথ নোটেশন ব্যবহার করে একটি কাস্টম পাথ সংজ্ঞায়িত করতে পারেন৷ দ্রষ্টব্য: একটি পলিলাইনে ভেক্টর পাথগুলি অবশ্যই 22x22px বর্গক্ষেত্রের মধ্যে ফিট করতে হবে। যদি আপনার পাথে এই বর্গক্ষেত্রের বাইরের বিন্দুগুলি অন্তর্ভুক্ত থাকে, তাহলে আপনাকে অবশ্যই চিহ্নের 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 প্রতীকের স্ট্রোকের আপেক্ষিক অস্বচ্ছতা (অর্থাৎ স্বচ্ছতার অভাব) নির্ধারণ করে। মান 0.0 (সম্পূর্ণ স্বচ্ছ) থেকে 1.0 (সম্পূর্ণ অস্বচ্ছ) পর্যন্ত। প্রতীক চিহ্নিতকারীদের জন্য, ডিফল্ট হল 1.0। পলিলাইনের প্রতীকগুলির জন্য, ডিফল্ট হল পলিলাইনের স্ট্রোক অস্বচ্ছতা।
• strokeWeight প্রতীকের রূপরেখার ওজনকে সংজ্ঞায়িত করে। ডিফল্ট হল প্রতীকের scale ।

পূর্বনির্ধারিত চিহ্ন

মানচিত্র জাভাস্ক্রিপ্ট এপিআই কিছু অন্তর্নির্মিত চিহ্ন প্রদান করে যা আপনি 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	একটি সামনের দিকে নির্দেশকারী তীর যা একপাশে খোলা।

একটি মার্কার একটি প্রতীক যোগ করুন

একটি মার্কারে একটি ভেক্টর-ভিত্তিক আইকন প্রদর্শন করতে, মার্কার icon বৈশিষ্ট্যে পছন্দসই পথ সহ একটি Symbol বস্তু আক্ষরিক পাস করুন। নিম্নলিখিত উদাহরণটি একটি মার্কার জন্য একটি কাস্টম আইকন তৈরি করতে SVG পাথ স্বরলিপি ব্যবহার করে৷

টাইপস্ক্রিপ্ট

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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

জাভাস্ক্রিপ্ট

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

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল

মার্কার রাস্টার ইমেজের পাশাপাশি ভেক্টর ইমেজের ব্যবহার সমর্থন করে। একটি মার্কার আইকন কাস্টমাইজ করার ডকুমেন্টেশন দেখুন।

একটি পলিলাইনে একটি প্রতীক যোগ করুন

একটি পলিলাইনে প্রতীক প্রদর্শন করতে, PolylineOptions অবজেক্টের icons[] বৈশিষ্ট্য সেট করুন। নিম্নলিখিত বৈশিষ্ট্য সহ icons[] অ্যারে এক বা একাধিক IconSequence অবজেক্ট লিটারেল নেয়:

• icon ( প্রয়োজনীয় ) হল লাইনে রেন্ডার করার প্রতীক।
• offset লাইনের শুরু থেকে দূরত্ব নির্ধারণ করে যেখানে একটি আইকন রেন্ডার করা হবে। এই দূরত্বটি লাইনের দৈর্ঘ্যের শতাংশ (উদাহরণস্বরূপ, '50%') বা পিক্সেলে (উদাহরণস্বরূপ, '50px') হিসাবে প্রকাশ করা যেতে পারে। ডিফল্ট হল '100%'।
• repeat লাইনে ধারাবাহিক আইকনগুলির মধ্যে দূরত্ব নির্ধারণ করে। এই দূরত্বটি লাইনের দৈর্ঘ্যের শতাংশ (উদাহরণস্বরূপ, '50%') বা পিক্সেলে (উদাহরণস্বরূপ, '50px') হিসাবে প্রকাশ করা যেতে পারে। আইকনের পুনরাবৃত্তি নিষ্ক্রিয় করতে, '0' উল্লেখ করুন। ডিফল্ট '0'।

দ্রষ্টব্য: যদি আপনার পলিলাইন জিওডেসিক হয় (অর্থাৎ, যদি এর geodesic সম্পত্তি true সেট করা থাকে) offset এবং repeat উভয়ের জন্য নির্দিষ্ট দূরত্ব ডিফল্টরূপে মিটারে গণনা করা হয়। একটি পিক্সেল মান 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
});

উদাহরণ দেখুন

ড্যাশড লাইন

আপনি আপনার পলিলাইনের অস্বচ্ছতা 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
  });

উদাহরণ দেখুন

একটি প্রতীক অ্যানিমেট

আপনি নির্দিষ্ট ব্যবধানে প্রতীকের অফসেট পরিবর্তন করতে DOM এর window.setInterval() ফাংশন ব্যবহার করে একটি পাথ বরাবর একটি প্রতীককে অ্যানিমেট করতে পারেন।

টাইপস্ক্রিপ্ট

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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

জাভাস্ক্রিপ্ট

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

দ্রষ্টব্য: জাভাস্ক্রিপ্টটি টাইপস্ক্রিপ্ট স্নিপেট থেকে সংকলিত হয়েছে।

উদাহরণ দেখুন

নমুনা চেষ্টা করুন

JSFiddle.net গুগল ক্লাউড শেল