प्रतीक (वेक्टर-आधारित आइकन)

  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 होता है.

पहले से तय किए गए सिंबल

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
  });

उदाहरण देखें

सिंबल को ऐनिमेट करें

तय इंटरवल में सिंबल के ऑफ़सेट को बदलने के लिए, DOM के 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
उदाहरण देखें

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