खास जानकारी
इस दस्तावेज़ में दिए गए सिद्धांत, उन सुविधाओं से जुड़े हैं जो सिर्फ़
google.maps.geometry लाइब्रेरी में उपलब्ध हैं. Maps JavaScript API को लोड करने पर, यह लाइब्रेरी डिफ़ॉल्ट रूप से लोड नहीं होती. हालांकि, इस libraries पैरामीटर के बारे में साफ़ तौर पर बताया जाना चाहिए. ज़्यादा जानकारी के लिए, लाइब्रेरी की खास जानकारी देखें.
Maps JavaScript एपीआई ज्यामिति लाइब्रेरी, पृथ्वी की सतह पर ज्यामितीय डेटा की गणना के लिए, यूटिलिटी फ़ंक्शन देती है. लाइब्रेरी में तीन नेमस्पेस हैं:
sphericalमें गोलाकार ज्यामिति सुविधाएं हैं, जिनकी मदद से आप कोण, दूरियों, और अक्षांश और देशांतर की जानकारी दे सकते हैं.encodingमें एन्कोड किए गए पॉलीलाइन एल्गोरिदम के मुताबिक पॉलीलाइन पाथ को कोड में बदलने और डिकोड करने की सुविधाएं मौजूद हैं.polyमें पॉलीगॉन और पॉलीलाइन वाले कंप्यूटेशन के लिए, यूटिलिटी फ़ंक्शन शामिल हैं.
google.maps.geometry लाइब्रेरी में कोई क्लास नहीं होती; इसके बजाय, लाइब्रेरी में ऊपर दिए गए नेमस्पेस के स्टैटिक तरीके शामिल हैं.
स्फ़ेरिकल ज्यामिति कॉन्सेप्ट
Maps JavaScript API में इमेज, दो डाइमेंशन वाली और फ़्लैट होती हैं. हालांकि, पृथ्वी तीन डाइमेंशन वाली है. इसे अक्सर स्फ़ीरिड (गोलाकार आकार) या गोल आकार वाले तूफ़ान के तौर पर अनुमान लगाया जाता है. Maps API में, हम किसी गोले का इस्तेमाल करते हैं और पृथ्वी को दो-डाइमेंशन वाली समतल जगह पर दिखाते हैं — जैसे कि आपकी कंप्यूटर स्क्रीन — Maps API प्रोजेक्शन का इस्तेमाल करता है.
2D प्रोजेक्शन में, मौजूदगी कभी-कभी गुमराह करने वाली हो सकती है. मैप को खास तौर पर डिस्टॉर्शन करना ज़रूरी होने की वजह से, आसान यूक्लिडियन ज्यामिति अक्सर लागू नहीं होती. उदाहरण के लिए, किसी गोले में दो बिंदुओं के बीच सबसे छोटी दूरी कोई सीधी रेखा नहीं होती, बल्कि एक बेहतरीन वृत्त (एक प्रकार का जियोडेसिक) होता है और 360 डिग्री तक की सतह पर एक त्रिभुज बनाने वाले कोण होते हैं.
इन अंतरों के कारण, किसी गोले (या उसके प्रोजेक्शन) पर ज्यामितीय फ़ंक्शन को ऐसे संरचनाओं की दूरी, शीर्षक, और क्षेत्र के रूप में गणना करने के लिए
गोलीय ज्यामिति का उपयोग करने की आवश्यकता होती है. इन गोलाकार ज्यामिति संरचनाओं की गणना करने के लिए
उपयोगितताएं मैप
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;
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;
सैंपल आज़माएं
एन्कोडिंग के तरीके
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;
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;
सैंपल आज़माएं
पॉलीगॉन और पॉलीलाइन फ़ंक्शन
ज्यामिति लाइब्रेरी के 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);