सिंबल (वेक्टर-आधारित आइकॉन)

  1. शुरुआती जानकारी
  2. किसी सिंबल की प्रॉपर्टी
  3. पहले से तय किए गए सिंबल
  4. मार्कर में कोई चिह्न जोड़ना
  5. पॉलीलाइन में कोई सिंबल जोड़ना
  6. किसी सिंबल को ऐनिमेट करना

परिचय

Symbol एक वेक्टर-आधारित आइकॉन है. इसे Marker या Polyline ऑब्जेक्ट पर दिखाया जा सकता है. सिंबल के आकार को SVG पाथ नोटेशन का इस्तेमाल करके, पाथ से तय किया जाता है. path एकमात्र ज़रूरी प्रॉपर्टी है. हालांकि, Symbol ऑब्जेक्ट में कई तरह की प्रॉपर्टी काम करती हैं. इनकी मदद से, विज़ुअल के अलग-अलग हिस्सों को अपनी पसंद के मुताबिक बनाया जा सकता है. जैसे, स्ट्रोक और भरने के रंग और वज़न. प्रॉपर्टी की सूची देखें.

SymbolPath क्लास की मदद से, पहले से तय कई सिंबल उपलब्ध हैं. यहां दी गई सूची देखें.

किसी सिंबल की प्रॉपर्टी

ध्यान दें कि Symbol के डिफ़ॉल्ट व्यवहार में थोड़ा अंतर होता है. यह इस बात पर निर्भर करता है कि यह मार्कर पर दिखता है या पॉलीलाइन पर. इन अंतरों के बारे में, यहां दी गई प्रॉपर्टी की सूची में बताया गया है.

Symbol में ये प्रॉपर्टी इस्तेमाल की जा सकती हैं:

  • path (ज़रूरी है) वह पाथ है जिससे चिह्न का आकार तय होता है. google.maps.SymbolPath में दिए गए पहले से तय पाथ में से किसी एक का इस्तेमाल किया जा सकता है. इसके अलावा, SVG पाथ नोटेशन का इस्तेमाल करके, अपनी पसंद का पाथ भी तय किया जा सकता है. ध्यान दें: पॉलीलाइन पर वेक्टर पाथ, 22x22 पिक्सल के स्क्वेयर में फ़िट होने चाहिए. अगर आपके पाथ में इस स्क्वेयर के बाहर के पॉइंट शामिल हैं, तो आपको चिह्न की scale प्रॉपर्टी को 0.2 जैसी फ़्रैक्शनल वैल्यू पर अडजस्ट करना होगा, ताकि स्केल किए गए पॉइंट स्क्वेयर में फ़िट हो सकें.
  • anchor, मार्कर या पॉलीलाइन के हिसाब से सिंबल की पोज़िशन सेट करता है. सिंबल के पाथ के निर्देशांक, ऐंकर के x और y निर्देशांक के हिसाब से, बाईं ओर और ऊपर ट्रांसलेट किए जाते हैं. डिफ़ॉल्ट रूप से, कोई सिंबल (0, 0) पर ऐंकर होता है. पोज़िशन को उसी कोऑर्डिनेट सिस्टम में दिखाया जाता है जिसका इस्तेमाल सिंबल के पाथ के लिए किया जाता है.
  • fillColor, सिंबल के भरे हुए हिस्से का रंग होता है. एक्सटेंडेड नेम वाले रंगों को छोड़कर, सभी सीएसएस3 रंग काम करते हैं. मार्कर पर सिंबल के लिए, डिफ़ॉल्ट तौर पर 'काला' होता है. पॉलीलाइन पर मौजूद सिंबल के लिए, डिफ़ॉल्ट रूप से पॉलीलाइन का स्ट्रोक कलर इस्तेमाल होता है.
  • fillOpacity, सिंबल के भरे हुए हिस्से की अपारदर्शिता (यानी, पारदर्शिता की कमी) तय करता है. वैल्यू 0.0 (पूरी तरह से पारदर्शी) से लेकर 1.0 (पूरी तरह से अपारदर्शी) तक हो सकती हैं. डिफ़ॉल्ट रूप से, यह 0.0 पर सेट होता है.
  • rotation वह कोण है जिससे सिंबल को घुमाया जाता है. इसे डिग्री में, घड़ी की सुई की दिशा में दिखाया जाता है. डिफ़ॉल्ट रूप से, किसी सिंबल मार्कर का रोटेशन 0 होता है. साथ ही, पॉलीलाइन पर मौजूद किसी सिंबल को उस किनारे के ऐंगल के हिसाब से घुमाया जाता है जिस पर वह मौजूद होता है. पॉलीलाइन पर किसी सिंबल के रोटेशन को सेट करने से, सिंबल का रोटेशन ठीक हो जाएगा. ऐसा करने पर, सिंबल अब लाइन के कर्व के हिसाब से नहीं घूमेगा.
  • scale सेट करता है कि सिंबल का साइज़ कितना बड़ा किया जाए. सिंबल मार्कर के लिए, डिफ़ॉल्ट स्केल 1 होता है. स्केल करने के बाद, चिह्न का साइज़ कुछ भी हो सकता है. पॉलीलाइन पर मौजूद सिंबल के लिए, डिफ़ॉल्ट स्केल, पॉलीलाइन के स्ट्रोक वज़न के बराबर होता है. स्केल करने के बाद, यह ज़रूरी है कि चिह्न 22x22 पिक्सल के स्क्वेयर में हो और वह चिह्न के ऐंकर के बीच में हो.
  • strokeColor, सिंबल की आउटलाइन का रंग है. एक्सटेंडेड नेम वाले रंगों को छोड़कर, सभी सीएसएस3 रंग इस्तेमाल किए जा सकते हैं. मार्कर पर सिंबल के लिए, डिफ़ॉल्ट तौर पर 'काला' होता है. पॉलीलाइन पर मौजूद सिंबल के लिए, डिफ़ॉल्ट रंग पॉलीलाइन के स्ट्रोक का रंग होता है.
  • strokeOpacity, सिंबल के स्ट्रोक की अपारदर्शिता (यानी, पारदर्शिता की कमी) तय करता है. वैल्यू 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 आगे की ओर इशारा करने वाला ऐरो, जो एक तरफ़ खुला है.

मार्कर में कोई चिह्न जोड़ना

किसी मार्कर पर वेक्टर-आधारित आइकॉन दिखाने के लिए, मार्कर की icon प्रॉपर्टी में अपनी पसंद के पाथ के साथ Symbol ऑब्जेक्ट लिटरल पास करें. नीचे दिए गए उदाहरण में, मार्कर के लिए कस्टम आइकॉन बनाने के लिए, 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

JavaScript

// 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
उदाहरण देखें

सैंपल आज़माएं

पॉलीलाइन में कोई सिंबल जोड़ना

पॉलीलाइन पर सिंबल दिखाने के लिए, PolylineOptions ऑब्जेक्ट की icons[] प्रॉपर्टी सेट करें. 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() फ़ंक्शन का इस्तेमाल करके, तय समयावधि में सिंबल के ऑफ़सेट को बदला जा सकता है.

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

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;
index.js
उदाहरण देखें

सैंपल आज़माएं