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

  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 वह कोण है जिससे चिह्न को घुमाना है, जिसे घड़ी की सुई की दिशा में डिग्री में दिखाया जाता है. डिफ़ॉल्ट रूप से, प्रतीक चिह्नक में और पॉलीलाइन पर मौजूद चिह्न को उस किनारे के कोण से घुमाया जाता है जिस पर वह झूठ. पॉलीलाइन पर किसी प्रतीक का घूर्णन सेट करने से चिह्न को इस तरह से सेट कर दें कि वह अब लाइन के कर्व के बाद नहीं चलेगा.
  • scale वह राशि सेट करता है जिसके अनुसार प्रतीक को आकार में स्केल किया जाता है. सिंबल मार्कर के लिए, डिफ़ॉल्ट स्केल 1 होता है. चिह्न स्केल करने के बाद कोई भी साइज़. पॉलीलाइन पर प्रतीकों के लिए, डिफ़ॉल्ट स्केल इसका स्ट्रोक भार होता है पॉलीलाइन. स्केल करने के बाद, सिंबल 22x22 पिक्सल के स्क्वेयर के अंदर होना चाहिए, चिह्न के बीच में.
  • 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 आगे की ओर इशारा करता हुआ तीर का निशान, जो एक तरफ़ खुला हुआ है.

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

किसी वेक्टर-आधारित आइकॉन को मार्कर, पास करें 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

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

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

पॉलीलाइन में चिह्न जोड़ें

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

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

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