आप अपने मैप पर अलग-अलग आकार जोड़ सकते हैं. आकार, मैप पर मौजूद वह चीज़ होती है जो अक्षांश/देशांतर निर्देशांक से जुड़ी होती है. ये आकार उपलब्ध हैं: लाइनें, पॉलीगॉन, सर्कल, और आयत. आप अपने आकार भी कॉन्फ़िगर कर सकते हैं, ताकि उपयोगकर्ता उनमें बदलाव कर सकें या उन्हें खींच सकें.
पॉलीलाइन
अपने मैप पर लाइन बनाने के लिए, पॉलीलाइन का इस्तेमाल करें.
Polyline
क्लास, मैप पर कनेक्ट किए गए लाइन सेगमेंट के लीनियर ओवरले के बारे में बताती है. Polyline
ऑब्जेक्ट में,
LatLng
जगहों का कलेक्शन होता है. साथ ही, यह लाइन सेगमेंट की एक सीरीज़ बनाता है, जो
उन जगहों को ऑर्डर वाले क्रम में जोड़ता है.
पॉलीलाइन जोड़ें
Polyline
कंस्ट्रक्टर,
PolylineOptions
का सेट लेता है,
जिससे पॉलीलाइन के विज़ुअल व्यवहार को अडजस्ट करने के लिए, लाइन के LatLng
कोऑर्डिनेट और स्टाइल के सेट तय किए जाते हैं.
Polyline
ऑब्जेक्ट, मैप पर सीधे सेगमेंट की सीरीज़ के तौर पर बनाए जाते हैं. लाइन बनाते समय, PolylineOptions
में लाइन के स्ट्रोक के लिए, पसंद के मुताबिक रंग, वज़न, और अपारदर्शिता तय की जा सकती है. इसके अलावा, कंस्ट्रक्शन के बाद भी इन प्रॉपर्टी में बदलाव किया जा सकता है.
पॉलीलाइन इन स्ट्रोक स्टाइल के साथ काम करती है:
strokeColor
,"#FFFFFF"
फ़ॉर्मैट का हेक्साडेसिमल एचटीएमएल कलर तय करता है.Polyline
क्लास में, नाम वाले रंग काम नहीं करते.strokeOpacity
, लाइन के रंग की ओपैसिटी तय करने के लिए,0.0
और1.0
के बीच की संख्या वाली वैल्यू बताता है. डिफ़ॉल्ट वैल्यू1.0
है.strokeWeight
से पिक्सल में लाइन की चौड़ाई की जानकारी मिलती है.
पॉलीलाइन की editable
प्रॉपर्टी से पता चलता है कि उपयोगकर्ता,
आकार में बदलाव कर सकते हैं या नहीं. नीचे उपयोगकर्ता की ओर से बदलाव किए जा सकने वाले आकार
देखें. इसी तरह, उपयोगकर्ताओं को लाइन खींचने की अनुमति देने के लिए, draggable
प्रॉपर्टी को
सेट किया जा सकता है.
TypeScript
// This example creates a 2-pixel-wide red polyline showing the path of // the first trans-Pacific flight between Oakland, CA, and Brisbane, // Australia which was made by Charles Kingsford Smith. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 3, center: { lat: 0, lng: -180 }, mapTypeId: "terrain", } ); const flightPlanCoordinates = [ { lat: 37.772, lng: -122.214 }, { lat: 21.291, lng: -157.821 }, { lat: -18.142, lng: 178.431 }, { lat: -27.467, lng: 153.027 }, ]; const flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2, }); flightPath.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates a 2-pixel-wide red polyline showing the path of // the first trans-Pacific flight between Oakland, CA, and Brisbane, // Australia which was made by Charles Kingsford Smith. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 3, center: { lat: 0, lng: -180 }, mapTypeId: "terrain", }); const flightPlanCoordinates = [ { lat: 37.772, lng: -122.214 }, { lat: 21.291, lng: -157.821 }, { lat: -18.142, lng: 178.431 }, { lat: -27.467, lng: 153.027 }, ]; const flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2, }); flightPath.setMap(map); } window.initMap = initMap;
सैंपल आज़माएं
पॉलीलाइन हटाएं
मैप से पॉलीलाइन हटाने के लिए, null
को तर्क के तौर पर पास करने वाले setMap()
तरीके को कॉल करें. इस उदाहरण में,
flightPath
एक पॉलीलाइन ऑब्जेक्ट है:
flightPath.setMap(null);
ध्यान दें कि ऊपर दिया गया तरीका पॉलीलाइन को नहीं मिटाता. यह मैप से
पॉलीलाइन हटा देता है. अगर इसके बजाय, आपको पॉलीलाइन को मिटाना है, तो
आपको उसे मैप से हटाना होगा. इसके बाद,
पॉलीलाइन को null
पर सेट करना होगा.
पॉलीलाइन की जांच करें
पॉलीलाइन, निर्देशांकों की सीरीज़ को LatLng
ऑब्जेक्ट के कलेक्शन के तौर पर तय करता है. ये निर्देशांक रेखा का पथ तय करते हैं.
निर्देशांक फिर से पाने के लिए, getPath()
को कॉल करें. इससे, आपको MVCArray
टाइप का कलेक्शन दिखेगा. ये कार्रवाइयां करके, कलेक्शन में बदलाव किया जा सकता है और उसकी जांच की जा सकती है:
getAt()
, किसी दी गई शून्य-आधारित इंडेक्स वैल्यू परLatLng
दिखाता है.insertAt()
, शून्य-आधारित इंडेक्स वैल्यू पर, पास किया गयाLatLng
शामिल करता है. ध्यान दें कि उस इंडेक्स वैल्यू पर मौजूद सभी निर्देशांकों को आगे ले जाया जाता है.removeAt()
, शून्य-आधारित इंडेक्स वैल्यू परLatLng
को हटा देता है.
TypeScript
// This example creates an interactive map which constructs a polyline based on // user clicks. Note that the polyline only appears once its path property // contains two LatLng coordinates. let poly: google.maps.Polyline; let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 7, center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA. }); poly = new google.maps.Polyline({ strokeColor: "#000000", strokeOpacity: 1.0, strokeWeight: 3, }); poly.setMap(map); // Add a listener for the click event map.addListener("click", addLatLng); } // Handles click events on a map, and adds a new point to the Polyline. function addLatLng(event: google.maps.MapMouseEvent) { const path = poly.getPath(); // Because path is an MVCArray, we can simply append a new coordinate // and it will automatically appear. path.push(event.latLng as google.maps.LatLng); // Add a new marker at the new plotted point on the polyline. new google.maps.Marker({ position: event.latLng, title: "#" + path.getLength(), map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates an interactive map which constructs a polyline based on // user clicks. Note that the polyline only appears once its path property // contains two LatLng coordinates. let poly; let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 7, center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA. }); poly = new google.maps.Polyline({ strokeColor: "#000000", strokeOpacity: 1.0, strokeWeight: 3, }); poly.setMap(map); // Add a listener for the click event map.addListener("click", addLatLng); } // Handles click events on a map, and adds a new point to the Polyline. function addLatLng(event) { const path = poly.getPath(); // Because path is an MVCArray, we can simply append a new coordinate // and it will automatically appear. path.push(event.latLng); // Add a new marker at the new plotted point on the polyline. new google.maps.Marker({ position: event.latLng, title: "#" + path.getLength(), map: map, }); } window.initMap = initMap;
सैंपल आज़माएं
पॉलीलाइन को पसंद के मुताबिक बनाएं
पॉलीलाइन में वेक्टर के आधार पर मौजूद इमेज को सिंबल के तौर पर जोड़ा जा सकता है. सिंबल और PolylineOptions
क्लास को मिलाकर
मैप पर पॉलीलाइन के लुक और स्टाइल को
बहुत बेहतर तरीके से कंट्रोल किया जा सकता है.
arrows, डैश वाली लाइन, कस्टम सिंबल, और ऐनिमेशन वाले सिंबल के बारे में जानकारी पाने के लिए, चिह्न देखें.
पॉलीगॉन
पॉलीगॉन, ऐसे इलाके को दिखाता है जो क्लोज़्ड पाथ (या लूप) से बंद होता है. यह
निर्देशांकों की एक सीरीज़ से तय होता है.
Polygon
ऑब्जेक्ट, Polyline
ऑब्जेक्ट से मिलते-जुलते होते हैं. इनमें कई क्रम में निर्देशांक होते हैं.
पॉलीगॉन, स्ट्रोक और फ़िल से बनाए जाते हैं. पॉलीगॉन के किनारे (स्ट्रोक) के लिए, पसंद के मुताबिक रंग, वज़न, और अपारदर्शिता तय की जा सकती है. साथ ही, बंद की गई जगह (फ़िल) के लिए पसंद के मुताबिक रंग और अपारदर्शिता तय की जा सकती है. रंगों को हेक्साडेसिमल एचटीएमएल फ़ॉर्मैट में दिखाया जाना चाहिए. रंगों के नाम का इस्तेमाल नहीं किया जा सकता.
Polygon
ऑब्जेक्ट, मुश्किल आकारों के बारे में बता सकते हैं. इनमें ये शामिल हैं:
- एक पॉलीगॉन द्वारा परिभाषित कई गैर-संतत क्षेत्र.
- उन जगहों को चुनें जिनमें छेद हैं.
- एक या एक से ज़्यादा इलाकों के चौराहे.
कोई जटिल आकार तय करने के लिए, आप एक से ज़्यादा पाथ वाले पॉलीगॉन का इस्तेमाल करें.
ध्यान दें: डेटा लेयर, पॉलीगॉन बनाने का एक आसान तरीका है. यह आपके लिए पॉलीगॉन विंग को हैंडल करता है, जिससे छेद वाले पॉलीगॉन बनाना आसान हो जाता है. डेटा लेयर के लिए दस्तावेज़ देखें.
कोई पॉलीगॉन जोड़ें
पॉलीगॉन एरिया में कई अलग-अलग पाथ हो सकते हैं, इसलिए
Polygon
ऑब्जेक्ट की paths
प्रॉपर्टी, कलेक्शन का कलेक्शन तय करती है. हर तरह का टाइप MVCArray
होता है. हर अरे, ऑर्डर किए गए LatLng
निर्देशांक का एक अलग क्रम तय करता है.
सिर्फ़ एक पाथ वाले सामान्य पॉलीगॉन के लिए, LatLng
निर्देशांक की एक कैटगरी का इस्तेमाल करके Polygon
बनाया जा सकता है. paths
प्रॉपर्टी में सेव करते समय, Maps JavaScript API सामान्य अरे को अरे के कलेक्शन में बदल देगा. यह एपीआई, एक पाथ वाले पॉलीगॉन के लिए
getPath()
तरीका उपलब्ध कराता है.
पॉलीगॉन की editable
प्रॉपर्टी बताती है कि उपयोगकर्ता आकार में बदलाव कर सकते हैं या नहीं. नीचे उपयोगकर्ता-बदलाव किए जा सकने वाले आकार देखें.
इसी तरह, draggable
प्रॉपर्टी को सेट करके, उपयोगकर्ताओं को
आकार को खींचने की अनुमति दी जा सकती है.
TypeScript
// This example creates a simple polygon representing the Bermuda Triangle. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 5, center: { lat: 24.886, lng: -70.268 }, mapTypeId: "terrain", } ); // Define the LatLng coordinates for the polygon's path. const triangleCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, { lat: 25.774, lng: -80.19 }, ]; // Construct the polygon. const bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates a simple polygon representing the Bermuda Triangle. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 5, center: { lat: 24.886, lng: -70.268 }, mapTypeId: "terrain", }); // Define the LatLng coordinates for the polygon's path. const triangleCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, { lat: 25.774, lng: -80.19 }, ]; // Construct the polygon. const bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); } window.initMap = initMap;
सैंपल आज़माएं
पॉलीगॉन अपने-आप पूरा होना
ऊपर दिए गए उदाहरण में Polygon
में LatLng
निर्देशांक के चार सेट हैं, लेकिन ध्यान दें कि पहला और आखिरी सेट एक ही जगह के बारे में बताता है, जिससे लूप पूरा होता है. हालांकि, पॉलीगॉन बंद क्षेत्रों को परिभाषित करते हैं, इसलिए आपको निर्देशांकों के आखिरी सेट को बताने की ज़रूरत नहीं है. Maps JavaScript API, किसी दिए गए पाथ के लिए आखिरी जगह को वापस पहली जगह से जोड़ने वाला स्ट्रोक खींचकर, पॉलीगॉन को अपने-आप पूरा कर देगा.
यह उदाहरण पिछले उदाहरण जैसा है. हालांकि, इसमें आखिरी LatLng
शामिल नहीं किया गया है: उदाहरण देखें.
पॉलीगॉन हटाएं
मैप से किसी पॉलीगॉन को हटाने के लिए, null
को तर्क के तौर पर पास करने वाले setMap()
तरीके को कॉल करें. यहां दिए गए उदाहरण में, bermudaTriangle
एक पॉलीगॉन ऑब्जेक्ट है:
bermudaTriangle.setMap(null);
ध्यान दें कि ऊपर दिया गया तरीका पॉलीगॉन को नहीं मिटाता. यह
पॉलीगॉन को मैप से हटा देता है. अगर इसके बजाय, आपको पॉलीगॉन मिटाना है, तो
आपको इसे मैप से हटाना होगा. इसके बाद, पॉलीगॉन को null
पर सेट करना होगा.
पॉलीगॉन की जांच करें
पॉलीगॉन, निर्देशांकों की सीरीज़ को कलेक्शन के कलेक्शन के तौर पर बताता है. इसमें हर अरे MVCArray
टाइप की होती है. हर "लीफ़" कलेक्शन, LatLng
निर्देशांक का एक कलेक्शन होता है
जो एक पाथ के बारे में बताता है. इन कोऑर्डिनेट को फिर से पाने के लिए, Polygon
ऑब्जेक्ट के getPaths()
तरीके को कॉल करें. कलेक्शन
MVCArray
है, इसलिए आपको इन कार्रवाइयों की मदद से, इसमें बदलाव करना होगा और
इसकी जांच करनी होगी:
getAt()
, किसी दी गई शून्य-आधारित इंडेक्स वैल्यू परLatLng
दिखाता है.insertAt()
, शून्य-आधारित इंडेक्स वैल्यू पर, पास किया गयाLatLng
शामिल करता है. ध्यान दें कि उस इंडेक्स वैल्यू पर मौजूद सभी निर्देशांकों को आगे ले जाया जाता है.removeAt()
, शून्य-आधारित इंडेक्स वैल्यू परLatLng
को हटा देता है.
TypeScript
// This example creates a simple polygon representing the Bermuda Triangle. // When the user clicks on the polygon an info window opens, showing // information about the polygon's coordinates. let map: google.maps.Map; let infoWindow: google.maps.InfoWindow; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 5, center: { lat: 24.886, lng: -70.268 }, mapTypeId: "terrain", }); // Define the LatLng coordinates for the polygon. const triangleCoords: google.maps.LatLngLiteral[] = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, ]; // Construct the polygon. const bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 3, fillColor: "#FF0000", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); // Add a listener for the click event. bermudaTriangle.addListener("click", showArrays); infoWindow = new google.maps.InfoWindow(); } function showArrays(event: any) { // Since this polygon has only one path, we can call getPath() to return the // MVCArray of LatLngs. // @ts-ignore const polygon = this as google.maps.Polygon; const vertices = polygon.getPath(); let contentString = "<b>Bermuda Triangle polygon</b><br>" + "Clicked location: <br>" + event.latLng.lat() + "," + event.latLng.lng() + "<br>"; // Iterate over the vertices. for (let i = 0; i < vertices.getLength(); i++) { const xy = vertices.getAt(i); contentString += "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng(); } // Replace the info window's content and position. infoWindow.setContent(contentString); infoWindow.setPosition(event.latLng); infoWindow.open(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates a simple polygon representing the Bermuda Triangle. // When the user clicks on the polygon an info window opens, showing // information about the polygon's coordinates. let map; let infoWindow; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 5, center: { lat: 24.886, lng: -70.268 }, mapTypeId: "terrain", }); // Define the LatLng coordinates for the polygon. const triangleCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, ]; // Construct the polygon. const bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 3, fillColor: "#FF0000", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); // Add a listener for the click event. bermudaTriangle.addListener("click", showArrays); infoWindow = new google.maps.InfoWindow(); } function showArrays(event) { // Since this polygon has only one path, we can call getPath() to return the // MVCArray of LatLngs. // @ts-ignore const polygon = this; const vertices = polygon.getPath(); let contentString = "<b>Bermuda Triangle polygon</b><br>" + "Clicked location: <br>" + event.latLng.lat() + "," + event.latLng.lng() + "<br>"; // Iterate over the vertices. for (let i = 0; i < vertices.getLength(); i++) { const xy = vertices.getAt(i); contentString += "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng(); } // Replace the info window's content and position. infoWindow.setContent(contentString); infoWindow.setPosition(event.latLng); infoWindow.open(map); } window.initMap = initMap;
सैंपल आज़माएं
पॉलीगॉन में छेद करें
पॉलीगॉन के अंदर एक खाली एरिया बनाने के लिए, आपको दो पाथ बनाने होंगे, एक दूसरे के अंदर. छेद करने के लिए, अंदरूनी पाथ को परिभाषित करने वाले निर्देशांक, बाहरी पाथ तय करने वाले निर्देशांकों के उलट होने चाहिए. उदाहरण के लिए, अगर बाहरी पाथ के निर्देशांक घड़ी की सुई की दिशा में हैं, तो इनर पाथ, घड़ी की उलटी दिशा में होना चाहिए.
ध्यान दें: डेटा लेयर, आपके लिए इनर और आउटर पाथ का क्रम मैनेज करता है. इससे, पॉलीगॉन को छेद वाले पॉलीगॉन बनाना आसान हो जाता है. डेटा लेयर के लिए दस्तावेज़ देखें.
नीचे दिए गए उदाहरण में दो पाथ वाला एक पॉलीगॉन बनाया गया है, जिसमें अंदरूनी पाथ बाहरी पाथ के उलट दिशा में घाव है.
TypeScript
// This example creates a triangular polygon with a hole in it. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 5, center: { lat: 24.886, lng: -70.268 }, } ); // Define the LatLng coordinates for the polygon's outer path. const outerCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, ]; // Define the LatLng coordinates for the polygon's inner path. // Note that the points forming the inner path are wound in the // opposite direction to those in the outer path, to form the hole. const innerCoords = [ { lat: 28.745, lng: -70.579 }, { lat: 29.57, lng: -67.514 }, { lat: 27.339, lng: -66.668 }, ]; // Construct the polygon, including both paths. const bermudaTriangle = new google.maps.Polygon({ paths: [outerCoords, innerCoords], strokeColor: "#FFC107", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FFC107", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates a triangular polygon with a hole in it. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 5, center: { lat: 24.886, lng: -70.268 }, }); // Define the LatLng coordinates for the polygon's outer path. const outerCoords = [ { lat: 25.774, lng: -80.19 }, { lat: 18.466, lng: -66.118 }, { lat: 32.321, lng: -64.757 }, ]; // Define the LatLng coordinates for the polygon's inner path. // Note that the points forming the inner path are wound in the // opposite direction to those in the outer path, to form the hole. const innerCoords = [ { lat: 28.745, lng: -70.579 }, { lat: 29.57, lng: -67.514 }, { lat: 27.339, lng: -66.668 }, ]; // Construct the polygon, including both paths. const bermudaTriangle = new google.maps.Polygon({ paths: [outerCoords, innerCoords], strokeColor: "#FFC107", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FFC107", fillOpacity: 0.35, }); bermudaTriangle.setMap(map); } window.initMap = initMap;
सैंपल आज़माएं
आयत
सामान्य Polygon
क्लास के अलावा, Google Maps JavaScript API में
Rectangle
ऑब्जेक्ट के लिए एक खास क्लास शामिल होती है, ताकि उन्हें आसानी से बनाया जा सके.
रेक्टैंगल जोड़ें
Rectangle
, Polygon
की तरह होता है.
इसमें, रेक्टैंगल (स्ट्रोक) के किनारे के लिए, पसंद के मुताबिक रंग, वज़न, और अपारदर्शिता (स्ट्रोक) और कस्टम रंग और अपारदर्शिता के बारे में बताया जा सकता है.
रेक्टैंगल (फ़िल) के अंदर का हिस्सा. रंगों को हेक्साडेसिमल न्यूमेरिक एचटीएमएल
स्टाइल में दिखाया जाना चाहिए.
Polygon
के उलट, आप Rectangle
के लिए paths
को तय नहीं करते हैं. इसके बजाय, रेक्टैंगल में एक bounds
प्रॉपर्टी होती है, जो रेक्टैंगल के लिए
google.maps.LatLngBounds
की जानकारी देकर, इसके आकार की जानकारी देती है.
रेक्टैंगल की editable
प्रॉपर्टी से पता चलता है कि
उपयोगकर्ता, आकार में बदलाव कर सकते हैं या नहीं. नीचे उपयोगकर्ता की ओर से बदलाव किए जा सकने वाले आकार देखें. इसी तरह, draggable
प्रॉपर्टी
को सेट करके, उपयोगकर्ताओं को रेक्टैंगल खींचकर छोड़ने की अनुमति दी जा सकती है.
TypeScript
// This example adds a red rectangle to a map. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 11, center: { lat: 33.678, lng: -116.243 }, mapTypeId: "terrain", } ); const rectangle = new google.maps.Rectangle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, bounds: { north: 33.685, south: 33.671, east: -116.234, west: -116.251, }, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a red rectangle to a map. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 11, center: { lat: 33.678, lng: -116.243 }, mapTypeId: "terrain", }); const rectangle = new google.maps.Rectangle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, bounds: { north: 33.685, south: 33.671, east: -116.234, west: -116.251, }, }); } window.initMap = initMap;
सैंपल आज़माएं
जब भी उपयोगकर्ता मैप पर ज़ूम बदलते हैं, तब यह कोड एक रेक्टैंगल बनाता है. रेक्टैंगल का साइज़, व्यूपोर्ट के हिसाब से तय होता है.
TypeScript
// This example creates a rectangle based on the viewport // on any 'zoom-changed' event. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 11, center: { lat: 40.74852, lng: -73.981687 }, mapTypeId: "terrain", } ); const rectangle = new google.maps.Rectangle(); map.addListener("zoom_changed", () => { // Get the current bounds, which reflect the bounds before the zoom. rectangle.setOptions({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, bounds: map.getBounds() as google.maps.LatLngBounds, }); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example creates a rectangle based on the viewport // on any 'zoom-changed' event. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 11, center: { lat: 40.74852, lng: -73.981687 }, mapTypeId: "terrain", }); const rectangle = new google.maps.Rectangle(); map.addListener("zoom_changed", () => { // Get the current bounds, which reflect the bounds before the zoom. rectangle.setOptions({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, bounds: map.getBounds(), }); }); } window.initMap = initMap;
सैंपल आज़माएं
रेक्टैंगल हटाना
मैप से कोई रेक्टैंगल हटाने के लिए, null
को तर्क के तौर पर देने वाले setMap()
तरीके को कॉल करें.
rectangle.setMap(null);
ध्यान दें कि ऊपर दिया गया तरीका रेक्टैंगल को नहीं मिटाता. यह मैप से रेक्टैंगल को हटा देता है. अगर इसके बजाय, आपको रेक्टैंगल मिटाना है,
तो आपको इसे मैप से हटाना होगा. इसके बाद, रेक्टैंगल को
null
पर सेट करना होगा.
सर्कल्स
सामान्य Polygon
क्लास के अलावा, Google Maps JavaScript API में
Circle
ऑब्जेक्ट के लिए एक खास क्लास शामिल होती है, ताकि उन्हें आसानी से बनाया जा सके.
एक मंडली जोड़ें
Circle
, Polygon
की तरह होता है. इसमें, सर्कल के किनारे (स्ट्रोक) के लिए पसंद के मुताबिक रंग, वज़न, और अपारदर्शिता (स्ट्रोक) और कस्टम रंग और अपारदर्शिता (फ़िल) की जानकारी दी जा सकती है. रंगों को हेक्साडेसिमल न्यूमेरिक एचटीएमएल स्टाइल में दिखाया जाना चाहिए.
Polygon
के उलट, आप Circle
के लिए paths
को तय नहीं करते हैं. इसके बजाय, सर्कल में दो अतिरिक्त प्रॉपर्टी होती हैं, जो इसके आकार को तय करती हैं:
center
, सर्कल के सेंटर केgoogle.maps.LatLng
के बारे में बताता है.radius
, सर्कल की रेडियस की जानकारी मीटर में देता है.
सर्कल की editable
प्रॉपर्टी से पता चलता है कि उपयोगकर्ता, आकार में बदलाव कर सकते हैं या नहीं. नीचे उपयोगकर्ता-बदलाव किए जा सकने वाले आकार देखें.
इसी तरह, उपयोगकर्ताओं को सर्कल को खींचने की अनुमति देने के लिए, draggable
प्रॉपर्टी को
सेट किया जा सकता है.
TypeScript
// This example creates circles on the map, representing populations in North // America. // First, create an object containing LatLng and population for each city. interface City { center: google.maps.LatLngLiteral; population: number; } const citymap: Record<string, City> = { chicago: { center: { lat: 41.878, lng: -87.629 }, population: 2714856, }, newyork: { center: { lat: 40.714, lng: -74.005 }, population: 8405837, }, losangeles: { center: { lat: 34.052, lng: -118.243 }, population: 3857799, }, vancouver: { center: { lat: 49.25, lng: -123.1 }, population: 603502, }, }; function initMap(): void { // Create the map. const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: 37.09, lng: -95.712 }, mapTypeId: "terrain", } ); // Construct the circle for each value in citymap. // Note: We scale the area of the circle based on the population. for (const city in citymap) { // Add the circle for this city to the map. const cityCircle = new google.maps.Circle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, center: citymap[city].center, radius: Math.sqrt(citymap[city].population) * 100, }); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
const citymap = { chicago: { center: { lat: 41.878, lng: -87.629 }, population: 2714856, }, newyork: { center: { lat: 40.714, lng: -74.005 }, population: 8405837, }, losangeles: { center: { lat: 34.052, lng: -118.243 }, population: 3857799, }, vancouver: { center: { lat: 49.25, lng: -123.1 }, population: 603502, }, }; function initMap() { // Create the map. const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: 37.09, lng: -95.712 }, mapTypeId: "terrain", }); // Construct the circle for each value in citymap. // Note: We scale the area of the circle based on the population. for (const city in citymap) { // Add the circle for this city to the map. const cityCircle = new google.maps.Circle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map, center: citymap[city].center, radius: Math.sqrt(citymap[city].population) * 100, }); } } window.initMap = initMap;
सैंपल आज़माएं
कोई मंडली निकालें
मैप से किसी सर्कल को हटाने के लिए, null
को तर्क के तौर पर पास करने वाले setMap()
तरीके को कॉल करें.
circle.setMap(null);
ध्यान दें कि ऊपर दिए गए तरीके से सर्कल नहीं मिटता. यह
सर्कल को मैप से हटा देता है. अगर इसके बजाय, सर्कल को मिटाना है, तो
आपको उसे मैप से हटाना होगा. इसके बाद, सर्कल को null
पर सेट करना होगा.
उपयोगकर्ता में बदलाव किए जा सकने वाले और खींचने लायक आकार
किसी आकार में बदलाव करने की सुविधा बनाने से, आकार में हैंडल जुड़ जाते हैं. इनका इस्तेमाल करके लोग सीधे मैप पर आकार की जगह बदल सकते हैं, उसे नया आकार दे सकते हैं, और उसका साइज़ बदल सकते हैं. आप किसी आकार को खींचने लायक भी बना सकते हैं, ताकि लोग उसे मैप पर किसी दूसरी जगह पर ले जा सकें.
ऑब्जेक्ट में उपयोगकर्ता के किए गए बदलाव, अलग-अलग सेशन के बीच लागू नहीं होते. अगर आपको उपयोगकर्ता के बदलावों को सेव करना है, तो आपको खुद जानकारी कैप्चर करके सेव करनी होगी.
किसी आकार को संपादन योग्य बनाएं
आकार के विकल्पों में editable
को true
पर सेट करके, किसी भी आकार (पॉलीलाइन, पॉलीगॉन, सर्कल, और रेक्टैंगल) को
ऐसे सेट किया जा सकता है जिसमें उपयोगकर्ता बदलाव कर सकें.
var bounds = { north: 44.599, south: 44.490, east: -78.443, west: -78.649 }; // Define a rectangle and set its editable property to true. var rectangle = new google.maps.Rectangle({ bounds: bounds, editable: true });
किसी आकार को खींचने और छोड़ने लायक बनाएं
डिफ़ॉल्ट रूप से, मैप पर बनाई गई आकृति, स्थिति में तय की जाएगी. उपयोगकर्ताओं को किसी आकार को मैप पर किसी दूसरी जगह पर ले जाने की अनुमति देने के लिए, आकार के विकल्पों में draggable
को true
पर सेट करें.
var redCoords = [ {lat: 25.774, lng: -80.190}, {lat: 18.466, lng: -66.118}, {lat: 32.321, lng: -64.757} ]; // Construct a draggable red triangle with geodesic set to true. new google.maps.Polygon({ map: map, paths: redCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, draggable: true, geodesic: true });
पॉलीगॉन या पॉलिलाइन पर ड्रैग करने की सुविधा चालू करते समय, आपको इसकी geodesic
प्रॉपर्टी को true
पर सेट करके, पॉलीगॉन या पॉलिलाइन को जियोडेसिक बनाना चाहिए.
जियोडेसिक पॉलीगॉन का आकार, जगह बदलने पर अपने असल भौगोलिक आकार में बना रहता है. इससे, मर्केटर प्रोजेक्शन में पॉलीगॉन उत्तर या दक्षिण की ओर बढ़ने पर टेढ़ा-मेढ़ा दिखता है. नॉन-जियोडेसिक पॉलीगॉन, स्क्रीन पर हमेशा अपने शुरुआती तौर पर दिखेंगे.
जियोडेसिक पॉलीलाइन में, पॉलीलाइन के सेगमेंट, पृथ्वी की सतह पर दो बिंदुओं के बीच सबसे छोटे पाथ के रूप में बनाए जाते हैं. ऐसा माना जाता है कि पृथ्वी एक गोल आकार है. यह मर्केटर प्रोजेक्शन में सीधी रेखाओं से अलग होता है.
निर्देशांक सिस्टम के बारे में ज़्यादा जानकारी के लिए, मैप और टाइल कोऑर्डिनेट की गाइड देखें.
नीचे दिए गए मैप में करीब एक ही साइज़ और
डाइमेंशन वाले दो त्रिभुज दिखाए गए हैं. लाल त्रिभुज की geodesic
प्रॉपर्टी
true
पर सेट है. ध्यान दें कि उत्तर की ओर बढ़ने पर इसका आकार कैसे बदलता है.
इवेंट में बदलाव करने की सुविधा को सुनना
जब किसी आकार में बदलाव किया जाता है, तो बदलाव पूरा होने पर इवेंट सक्रिय हो जाता है. इन इवेंट की सूची नीचे दी गई है.
आकार | इवेंट |
---|---|
सर्कल |
radius_changed center_changed
|
पॉलीगॉन |
insert_at remove_at set_at
लिसनर को पॉलीगॉन के पाथ पर सेट किया जाना चाहिए. अगर पॉलीगॉन में एक से ज़्यादा पाथ हैं, तो हर पाथ के लिए लिसनर सेट करना ज़रूरी है. |
पॉलीलाइन |
insert_at remove_at set_at
लिसनर को पॉलीलाइन के पाथ पर सेट किया जाना चाहिए. |
रेक्टैंगल | bounds_changed |
कुछ काम के कोड स्निपेट:
google.maps.event.addListener(circle, 'radius_changed', function() { console.log(circle.getRadius()); }); google.maps.event.addListener(outerPath, 'set_at', function() { console.log('Vertex moved on outer path.'); }); google.maps.event.addListener(innerPath, 'insert_at', function() { console.log('Vertex removed from inner path.'); }); google.maps.event.addListener(rectangle, 'bounds_changed', function() { console.log('Bounds changed.'); });
रेक्टैंगल पर, बदलाव करने वाले इवेंट को मैनेज करने का उदाहरण देखें: उदाहरण देखें.
खींचकर छोड़ने वाले इवेंट को सुनना
जब किसी आकार को खींचा जाता है, तो इवेंट, खींचने और छोड़ने की कार्रवाई के शुरू और खत्म होने पर ट्रिगर होते हैं. साथ ही, खींचने के दौरान भी ट्रिगर होते हैं. नीचे दिए गए इवेंट, पॉलीलाइन, पॉलीगॉन, सर्कल, और रेक्टैंगल के लिए फ़ायर किए जाते हैं.
इवेंट | जानकारी |
---|---|
dragstart |
यह तब ट्रिगर होता है, जब उपयोगकर्ता आकार को खींचना शुरू करता है. |
drag |
जब उपयोगकर्ता आकार को खींच रहा होता है, तब उसे बार-बार सक्रिय किया जाता है. |
dragend |
यह तब ट्रिगर होता है, जब उपयोगकर्ता आकार को खींचना बंद कर देता है. |
इवेंट मैनेज करने के बारे में ज़्यादा जानने के लिए, इवेंट से जुड़े दस्तावेज़ देखें.