इस पेज का अनुवाद Cloud Translation API से किया गया है.

ज्यामिती लाइब्रेरी

खास जानकारी
गोल आकार के ज्यामिति के सिद्धांत
1. दूरी और एरिया फ़ंक्शन
2. नेविगेशन फ़ंक्शन
ज्यामिति की एन्कोडिंग
पॉलीगॉन और पॉलीलाइन फ़ंक्शन
1. इसमें शामिल है जगह की जानकारी()
2. isLocationOnEdge()

खास जानकारी

इस दस्तावेज़ में शामिल सिद्धांत, google.maps.geometry लाइब्रेरी में मौजूद सुविधाओं के बारे में ही बताते हैं. Maps JavaScript एपीआई लोड करने पर, यह लाइब्रेरी डिफ़ॉल्ट रूप से लोड नहीं होती. हालांकि, इस libraries पैरामीटर को बूटस्ट्रेट पैरामीटर का इस्तेमाल करके, साफ़ तौर पर बताया जाना चाहिए. ज़्यादा जानकारी के लिए, लाइब्रेरी की खास जानकारी देखें.

Maps JavaScript API की ज्यामिति लाइब्रेरी, पृथ्वी की सतह पर मौजूद जियोमेट्रिक डेटा को कंप्यूट करने की सुविधा देती है. इस लाइब्रेरी में तीन नेमस्पेस हैं:

spherical में गोल आकार की ज्यामिति सेवाएं होती हैं, जिनसे आप कोणों, दूरियों, और अक्षांश और देशांतर की जगहों का हिसाब लगा सकते हैं.
encoding में एन्कोड किए गए पॉलीलाइन एल्गोरिदम के हिसाब से, पॉलीलाइन पाथ को कोड में बदलने और डिकोड करने वाली सुविधाएं शामिल होती हैं.
poly में पॉलीगॉन और पॉलीलाइन का इस्तेमाल करके, कंप्यूटेशन के लिए यूटिलिटी फ़ंक्शन शामिल होते हैं.

google.maps.geometry लाइब्रेरी में कोई क्लास नहीं है. इसके बजाय, लाइब्रेरी में ऊपर दिए गए नेमस्पेस के लिए, स्टैटिक तरीके दिए गए हैं.

स्फ़ेरिकल ज्यामिति सिद्धांत

Maps JavaScript API की इमेज दो डाइमेंशन में और "सपाट" होती हैं. पृथ्वी, तीन डाइमेंशन वाली होती है. इसे अक्सर गोल आकार वाले स्फ़ेरॉइड के तौर पर या गोल आकार में इस्तेमाल करने से मिलता है. Maps API में, हम एक फ़ील्ड का इस्तेमाल करते हैं और Google को दो डाइमेंशन वाली सतह, जैसे कि आपकी कंप्यूटर स्क्रीन पर दिखाने के लिए, Maps API अनुमान का इस्तेमाल करता है.

कभी-कभी 2D प्रोजेक्शन में नज़र आने का भ्रम पैदा हो सकता है. मैप प्रोजेक्शन के लिए कुछ डिस्टॉर्शन की ज़रूरत होती है, इसलिए आसान यूक्लिडियन ज्यामिति अक्सर लागू नहीं होती. उदाहरण के लिए, किसी गोले के दो बिंदुओं के बीच सबसे छोटी दूरी कोई सीधी रेखा नहीं होती, एक बेहतरीन सर्कल होती है (एक तरह का जियोडेसिक) और गोले का एक कोण बनाया जाता है. इसकी गणना 180 डिग्री से ज़्यादा होती है.

इन अंतरों की वजह से, किसी गोला (या इसके प्रोजेक्शन) पर ज्यामितीय फ़ंक्शन को परिगोल ज्यामिति का इस्तेमाल करना ज़रूरी होता है, ताकि इस तरह की संरचनाओं को दूरी, शीर्षक, और क्षेत्र के आधार पर कैलकुलेट किया जा सके. ये गोल आकार वाली ज्यामितीय संरचनाओं को कैलकुलेट करने के लिए सुविधाएं, Maps API के google.maps.geometry.spherical नेमस्पेस में मौजूद हैं. यह नेमस्पेस गोल आकार के अक्षांश और देशांतर का पता लगाने के लिए, स्टैटिक तरीके उपलब्ध कराता है.

दूरी और क्षेत्र के फ़ंक्शन

दो बिंदुओं के बीच की दूरी उनके बीच के सबसे छोटे पथ की लंबाई होती है. इस सबसे छोटे पाथ को जियोडेसिक कहा जाता है. गोल गोले में, सभी ज्यामितीय अच्छे गोले के खंड होते हैं. इस दूरी का हिसाब लगाने के लिए, computeDistanceBetween() को कॉल करें और इसे दो LatLng ऑब्जेक्ट पास करें.

अगर आपके पास कई जगहें हैं, तो दिए गए पाथ की लंबाई का हिसाब लगाने के लिए, computeLength() का इस्तेमाल किया जा सकता है.

दूरी के नतीजे मीटर में दिखाए जाते हैं.

किसी बहुभुज क्षेत्र के वर्ग (वर्ग मीटर) में गणना करने के लिए, computeArea() को कॉल करें, एक बंद लूप तय करने वाले LatLng ऑब्जेक्ट की श्रेणी पास करें.

किसी फ़ील्ड पर नेविगेट करते समय, शीर्षक दिशा-निर्देश का ऐसा कोण होता है जो एक तय रेफ़रंस पॉइंट से लिया जाता है. आम तौर पर, यह दिशा उत्तर की ओर होती है. Google Maps API में, शीर्षक को सही उत्तर से डिग्री में दिखाया जाता है, जहां शीर्षकों को सही उत्तर दिशा में (0 डिग्री) घड़ी की दिशा में मापा जाता है. computeHeading() तरीके का इस्तेमाल करके, दो जगहों के बीच इस शीर्षक का हिसाब लगाया जा सकता है. इसके लिए, दोfrom और to LatLng ऑब्जेक्ट पास किए जा सकते हैं.

किसी खास शीर्षक, ऑरिजिन की जगह, और यात्रा करने की दूरी (मीटर में) को ध्यान में रखते हुए, computeOffset() का इस्तेमाल करके, डेस्टिनेशन के निर्देशांकों का पता लगाया जा सकता है.

LatLng के दो और 0 और 1 के बीच के ऑब्जेक्ट को देखते हुए, interpolate() मेथड का इस्तेमाल करके, इनके बीच की डेस्टिनेशन का भी हिसाब लगाया जा सकता है. यह दो जगहों के बीच के गोल दूरी के अंतर को दिखाता है, जहां वैल्यू मूल जगह से यात्रा करने वाले फ़्रैक्चरल डिस्टेंस को दिखाती है.

मैप में दो बिंदुओं पर क्लिक करने पर नीचे दिया गया उदाहरण दो पॉलीलाइन बनाता है — एक जियोडेसिक और एक "सीधे" लाइन जो दो जगहों को कनेक्ट करती है — और दो बिंदुओं के बीच यात्रा करने के शीर्षक की गणना करती है:

TypeScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

let marker1: google.maps.Marker, marker2: google.maps.Marker;
let poly: google.maps.Polyline, geodesicPoly: google.maps.Polyline;

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 34, lng: -40.605 },
    }
  );

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
    document.getElementById("info") as HTMLElement
  );

  marker1 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 40.714, lng: -74.006 },
  });

  marker2 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 48.857, lng: 2.352 },
  });

  const bounds = new google.maps.LatLngBounds(
    marker1.getPosition() as google.maps.LatLng,
    marker2.getPosition() as google.maps.LatLng
  );

  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, "position_changed", update);
  google.maps.event.addListener(marker2, "position_changed", update);

  poly = new google.maps.Polyline({
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  geodesicPoly = new google.maps.Polyline({
    strokeColor: "#CC0099",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map,
  });

  update();
}

function update() {
  const path = [
    marker1.getPosition() as google.maps.LatLng,
    marker2.getPosition() as google.maps.LatLng,
  ];

  poly.setPath(path);
  geodesicPoly.setPath(path);

  const heading = google.maps.geometry.spherical.computeHeading(
    path[0],
    path[1]
  );

  (document.getElementById("heading") as HTMLInputElement).value =
    String(heading);
  (document.getElementById("origin") as HTMLInputElement).value = String(
    path[0]
  );
  (document.getElementById("destination") as HTMLInputElement).value = String(
    path[1]
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
let marker1, marker2;
let poly, geodesicPoly;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 34, lng: -40.605 },
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
    document.getElementById("info"),
  );
  marker1 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 40.714, lng: -74.006 },
  });
  marker2 = new google.maps.Marker({
    map,
    draggable: true,
    position: { lat: 48.857, lng: 2.352 },
  });

  const bounds = new google.maps.LatLngBounds(
    marker1.getPosition(),
    marker2.getPosition(),
  );

  map.fitBounds(bounds);
  google.maps.event.addListener(marker1, "position_changed", update);
  google.maps.event.addListener(marker2, "position_changed", update);
  poly = new google.maps.Polyline({
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });
  geodesicPoly = new google.maps.Polyline({
    strokeColor: "#CC0099",
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map,
  });
  update();
}

function update() {
  const path = [marker1.getPosition(), marker2.getPosition()];

  poly.setPath(path);
  geodesicPoly.setPath(path);

  const heading = google.maps.geometry.spherical.computeHeading(
    path[0],
    path[1],
  );

  document.getElementById("heading").value = String(heading);
  document.getElementById("origin").value = String(path[0]);
  document.getElementById("destination").value = String(path[1]);
}

window.initMap = initMap;index.js

उदाहरण देखें

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

कोड में बदलने के तरीके

Maps JavaScript एपीआई के पाथ को अक्सर LatLng ऑब्जेक्ट में से Array के तौर पर बताया जाता है. हालांकि, ऐसी ऐरे के आस-पास से गुज़रना अक्सर मुश्किल होता है. इसके बजाय, किसी दिए गए पाथ को कंप्रेस करने के लिए, Google के पॉलीलाइन एनकोडिंग एल्गोरिदम का इस्तेमाल किया जा सकता है. इसे बाद में, डीकोड करने की प्रक्रिया के ज़रिए कंप्रेस किया जा सकता है.

geometry लाइब्रेरी में, encoding के लिए सुविधाएं हैं. इसके अलावा, यूटिलिटी के ज़रिए पॉलीलाइन को एन्कोड और डिकोड किया जा सकता है.

स्टैटिक तरीके encodePath() से, दिए गए पाथ को कोड में बदला जाता है. आप या तो LatLng या किसी MVCArray की श्रेणी पास कर सकते हैं (जो Polyline.getPath() से मिलता है).

कोड में बदलने के पाथ को डिकोड करने के लिए, कोड में बदली गई स्ट्रिंग पास करने के लिए, decodePath() को कॉल करें.

इस उदाहरण में ऑक्सफ़र्ड, मिसीसिपी का मैप दिखाया गया है. मैप पर क्लिक करने से, पॉलीलाइन का एक पॉइंट जुड़ जाता है. पॉलीलाइन के बनने के बाद, उसकी एन्कोडिंग नीचे दिखाई देती है.

TypeScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 14,
      center: { lat: 34.366, lng: -89.519 },
    }
  );
  const poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map,
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, "click", (event) => {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(
  latLng: google.maps.LatLng,
  poly: google.maps.Polyline
) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  const encodeString = google.maps.geometry.encoding.encodePath(path);

  if (encodeString) {
    (document.getElementById("encoded-polyline") as HTMLInputElement).value =
      encodeString;
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 34.366, lng: -89.519 },
  });
  const poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map,
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, "click", (event) => {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  const encodeString = google.maps.geometry.encoding.encodePath(path);

  if (encodeString) {
    document.getElementById("encoded-polyline").value = encodeString;
  }
}

window.initMap = initMap;index.js

उदाहरण देखें

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

पॉलीगॉन और पॉलीलाइन फ़ंक्शन

ज्यामिति लाइब्रेरी के poly नेमस्पेस में उपयोगिता फ़ंक्शन शामिल हैं, जो यह तय करते हैं कि दिया गया बिंदु पॉलीगॉन में है या पॉलीलाइन के पास.

इसमें Location() शामिल है

containsLocation(point:LatLng, polygon:Polygon)

यह पता लगाने के लिए कि दिया गया पॉइंट पॉलीगॉन में है या नहीं, उस पॉइंट को पास करें और google.maps.geometry.poly.containsLocation() को पॉलीगॉन करें. अगर पॉइंट पॉलीगॉन में है या उसके किनारे पर है, तो फ़ंक्शन सही वैल्यू दिखाता है.

अगर उपयोगकर्ता का क्लिक, तय किए गए त्रिकोण में आता है, तो ब्राउज़र कोड को यह कोड 'सही' लिखता है. अगर ऐसा नहीं होता है, तो यह 'गलत' लिखता है.

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886, -70.269),
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var bermudaTriangle = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(25.774, -80.190),
      new google.maps.LatLng(18.466, -66.118),
      new google.maps.LatLng(32.321, -64.757)
    ]
  });

  google.maps.event.addListener(map, 'click', function(event) {
    console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

अगर क्लिक बरमूडा ट्रायएंगल में आता है, तो कोड का कोई दूसरा वर्शन मैप पर नीले रंग का त्रिभुज दिखाता है या फिर लाल रंग का गोला दिखाता है:

उदाहरण देखें

isLocationOnEdge()

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)

यह पता लगाने के लिए कि कोई बिंदु पॉलीपॉलिन पर है या उसके आस-पास है, पॉलीगॉन के पास या उसके पास, पॉइंट पास करें, पॉलीलाइन/पॉलीगॉन, और डिग्री में दी गई सहिष्णुता का मान google.maps.geometry.poly.isLocationOnEdge(). अगर पॉइंट और लाइन के किनारे या सबसे नज़दीकी पॉइंट के बीच की दूरी, तय की गई सहिष्णुता के दायरे में आती है, तो फ़ंक्शन 'सही' दिखाता है. डिफ़ॉल्ट सहिष्णुता का मान 10^-9 डिग्री है.

function initialize() {
  var myPosition = new google.maps.LatLng(46.0, -125.9);

  var mapOptions = {
    zoom: 5,
    center: myPosition,
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var cascadiaFault = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(49.95, -128.1),
      new google.maps.LatLng(46.26, -126.3),
      new google.maps.LatLng(40.3, -125.4)
    ]
  });

  cascadiaFault.setMap(map);

  if (google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1)) {
    alert("Relocate!");
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

ज्यामिती लाइब्रेरी

खास जानकारी

स्फ़ेरिकल ज्यामिति सिद्धांत

दूरी और क्षेत्र के फ़ंक्शन

नेविगेशन फ़ंक्शन

TypeScript

JavaScript

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

कोड में बदलने के तरीके

TypeScript

JavaScript

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

पॉलीगॉन और पॉलीलाइन फ़ंक्शन

इसमें Location() शामिल है

isLocationOnEdge()