सुरक्षा नोटिस: हमें सुरक्षा से जुड़ी एक समस्या का पता चला है. यह समस्या तीसरे पक्ष की कुछ लाइब्रेरी (इसमें polyfill.io शामिल है) का इस्तेमाल करने वाली वेबसाइटों पर असर डाल सकती है. इस समस्या की वजह से, वेबसाइट पर आने वाले लोगों को कभी-कभी अपनी वेबसाइट के मालिक की जानकारी या अनुमति के बिना ही, दूसरी वेबसाइट पर रीडायरेक्ट कर दिया जाता है. हमारे कई JavaScript सैंपल में, पहले से polyfill.io स्क्रिप्ट का एलान शामिल था. हमने इसे अपने सैंपल से हटा दिया है. अगर आपने हमारे JavaScript सैंपल का इस्तेमाल किया है और इनमें यह एलान शामिल है, तो हमारा सुझाव है कि आप इस एलान को हटा दें.

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

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

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

खास जानकारी

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

Maps JavaScript API की ज्यामिति लाइब्रेरी, Earth की सतह पर ज्यामितीय डेटा की गणना करने के लिए उपयोगिता फ़ंक्शन उपलब्ध कराती है. लाइब्रेरी में तीन नेमस्पेस होते हैं:

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

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

स्फ़ेरिकल ज्यामिति कॉन्सेप्ट

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

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

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

दूरी और एरिया फ़ंक्शन

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

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

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

पॉलीगॉन एरिया के एरिया (स्क्वेयर मीटर में) का पता लगाने के लिए, computeArea() को कॉल करें. इसके बाद, क्लोज़्ड लूप की जानकारी देने वाले LatLng ऑब्जेक्ट के अरे को पास करें.

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

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

0 और 1 के बीच दो LatLng ऑब्जेक्ट और मान दिए गए हैं. आप 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 Google क्लाउड शेल

एन्कोडिंग के तरीके

Maps JavaScript API में पाथ अक्सर 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 Google क्लाउड शेल

पॉलीगॉन और पॉलीलाइन फलन

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

containsLocation()

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

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

पॉलीगॉन और पॉलीलाइन फलन

containsLocation()

isLocationOnEdge()