Google मानचित्र ओवरले
Google मानचित्र - ओवरले
ओवरले मानचित्र पर ऑब्जेक्ट होते हैं जो अक्षांश/देशांतर निर्देशांक से बंधे होते हैं।
Google मानचित्र में कई प्रकार के ओवरले हैं:
- मार्कर - मानचित्र पर एकल स्थान। मार्कर कस्टम आइकन चित्र भी प्रदर्शित कर सकते हैं
- पॉलीलाइन - मानचित्र पर सीधी रेखाओं की श्रृंखला
- बहुभुज - मानचित्र पर सीधी रेखाओं की श्रृंखला, और आकार "बंद" है
- वृत्त और आयत
- जानकारी विंडोज - एक मानचित्र के शीर्ष पर एक पॉपअप गुब्बारे के भीतर सामग्री प्रदर्शित करता है
- कस्टम ओवरले
Google मानचित्र - एक मार्कर जोड़ें
मार्कर कंस्ट्रक्टर एक मार्कर बनाता है। ध्यान दें कि मार्कर को प्रदर्शित करने के लिए स्थिति गुण सेट किया जाना चाहिए।
सेटमैप () पद्धति का उपयोग करके मार्कर को मानचित्र में जोड़ें:
उदाहरण
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google मानचित्र - मार्कर को चेतन करें
नीचे दिया गया उदाहरण दिखाता है कि ऐनिमेशन प्रॉपर्टी के साथ मार्कर को कैसे एनिमेट किया जाए:
उदाहरण
var
marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google मानचित्र - मार्कर के स्थान पर चिह्न
नीचे दिया गया उदाहरण डिफ़ॉल्ट मार्कर के बजाय उपयोग करने के लिए एक छवि (आइकन) निर्दिष्ट करता है:
उदाहरण
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
गूगल मैप्स - पॉलीलाइन
एक पॉलीलाइन एक रेखा है जो एक क्रमबद्ध क्रम में निर्देशांक की एक श्रृंखला के माध्यम से खींची जाती है।
एक पॉलीलाइन निम्नलिखित गुणों का समर्थन करती है:
- पथ - रेखा के लिए कई अक्षांश/देशांतर निर्देशांक निर्दिष्ट करता है
- स्ट्रोककलर - रेखा के लिए एक हेक्साडेसिमल रंग निर्दिष्ट करता है (प्रारूप: "#FFFFFF")
- स्ट्रोकओपेसिटी - लाइन की अपारदर्शिता को निर्दिष्ट करता है (0.0 और 1.0 के बीच का मान)
- स्ट्रोकवेट - रेखा के स्ट्रोक के वजन को पिक्सेल में निर्दिष्ट करता है
- संपादन योग्य - परिभाषित करता है कि लाइन उपयोगकर्ताओं द्वारा संपादन योग्य है या नहीं (सही/गलत)
उदाहरण
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
गूगल मैप्स - बहुभुज
एक बहुभुज एक पॉलीलाइन के समान है जिसमें एक क्रमबद्ध क्रम में निर्देशांक की एक श्रृंखला होती है। हालांकि, बहुभुज एक बंद लूप के भीतर क्षेत्रों को परिभाषित करने के लिए डिज़ाइन किए गए हैं।
बहुभुज सीधी रेखाओं से बने होते हैं, और आकार "बंद" होता है (सभी रेखाएँ जुड़ती हैं)।
एक बहुभुज निम्नलिखित गुणों का समर्थन करता है:
- पथ - लाइन के लिए कई LatLng निर्देशांक निर्दिष्ट करता है (पहले और अंतिम निर्देशांक बराबर हैं)
- स्ट्रोककलर - रेखा के लिए एक हेक्साडेसिमल रंग निर्दिष्ट करता है (प्रारूप: "#FFFFFF")
- स्ट्रोकओपेसिटी - लाइन की अपारदर्शिता को निर्दिष्ट करता है (0.0 और 1.0 के बीच का मान)
- स्ट्रोकवेट - रेखा के स्ट्रोक के वजन को पिक्सेल में निर्दिष्ट करता है
- fillColor - संलग्न क्षेत्र के भीतर क्षेत्र के लिए एक हेक्साडेसिमल रंग निर्दिष्ट करता है (प्रारूप: "#FFFFFF")
- fillOpacity - भरण रंग की अस्पष्टता निर्दिष्ट करता है (0.0 और 1.0 के बीच का मान)
- संपादन योग्य - परिभाषित करता है कि लाइन उपयोगकर्ताओं द्वारा संपादन योग्य है या नहीं (सही/गलत)
उदाहरण
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
गूगल मैप्स - सर्कल
एक वृत्त निम्नलिखित गुणों का समर्थन करता है:
- केंद्र - सर्कल के केंद्र के google.maps.LatLng को निर्दिष्ट करता है
- त्रिज्या - वृत्त की त्रिज्या को मीटर में निर्दिष्ट करता है
- स्ट्रोककलर - वृत्त के चारों ओर की रेखा के लिए एक हेक्साडेसिमल रंग निर्दिष्ट करता है (प्रारूप: "#FFFFFF")
- स्ट्रोक अपारदर्शिता - स्ट्रोक के रंग की अस्पष्टता को निर्दिष्ट करता है (0.0 और 1.0 के बीच का मान)
- स्ट्रोकवेट - रेखा के स्ट्रोक के वजन को पिक्सेल में निर्दिष्ट करता है
- fillColor - वृत्त के भीतर क्षेत्र के लिए एक हेक्साडेसिमल रंग निर्दिष्ट करता है (प्रारूप: "#FFFFFF")
- fillOpacity - भरण रंग की अस्पष्टता निर्दिष्ट करता है (0.0 और 1.0 के बीच का मान)
- संपादन योग्य - परिभाषित करता है कि क्या मंडली उपयोगकर्ताओं द्वारा संपादन योग्य है (सही/गलत)
उदाहरण
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
गूगल मैप्स - InfoWindow
एक मार्कर के लिए कुछ पाठ्य सामग्री के साथ एक InfoWindow दिखाएँ:
उदाहरण
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);