आकार और रेखाएं

आप अपने मैप पर अलग-अलग आकार जोड़ सकते हैं. आकार, मैप पर मौजूद किसी चीज़ को कहते हैं. अक्षांश/देशांतर निर्देशांक से जुड़ा होता है. ये आकार उपलब्ध हैं: लाइनें, पॉलीगॉन, सर्कल और रेक्टैंगल. आप अपने आकार भी कॉन्फ़िगर कर सकते है, ताकि उपयोगकर्ता उनमें बदलाव करें या उन्हें खींचें और छोड़ें.

पॉलीलाइन

अपने मैप पर लाइन बनाने के लिए, पॉलीलाइन का इस्तेमाल करें. कॉन्टेंट बनाने Polyline क्लास, कनेक्टेड लाइन के लीनियर ओवरले के बारे में बताती है पर सेगमेंट बना सकता है. Polyline ऑब्जेक्ट में ये होता है LatLng स्थान पर मौजूद होता है और ऐसे लाइन सेगमेंट की सीरीज़ बनाता है जो उन जगहों को, क्रम से लगाए गए क्रम में जोड़ते हैं.

पॉलीलाइन जोड़ें

Polyline कंस्ट्रक्टर PolylineOptions, LatLng की जानकारी दे रहा है पॉलीलाइन को अडजस्ट करने के लिए, लाइन के निर्देशांक और स्टाइल का सेट विज़ुअल व्यवहार.

Polyline ऑब्जेक्ट, सीधे सेगमेंट की सीरीज़ के तौर पर बनाए जाते हैं मैप. स्ट्रोक के लिए पसंद के मुताबिक रंग, मोटाई, और अपारदर्शिता तय की जा सकती है PolylineOptions में लाइन का सेट करें, जब लाइन बनाना शुरू करें या कंस्ट्रक्शन के बाद उन प्रॉपर्टी को बदला जा सकता है. पॉलीलाइन इन स्ट्रोक स्टाइल के साथ काम करती है:

• strokeColor, फ़ॉर्मैट का हेक्साडेसिमल एचटीएमएल कलर तय करता है "#FFFFFF". Polyline क्लास का इस्तेमाल नहीं किया जा सकता नाम वाले रंग.
• strokeOpacity इनके बीच एक संख्यात्मक मान तय करता है लाइन की ओपैसिटी (अपारदर्शिता) तय करने के लिए, 0.0 और 1.0 रंग. डिफ़ॉल्ट वैल्यू 1.0 है.
• strokeWeight से पिक्सल में लाइन की चौड़ाई की जानकारी मिलती है.

पॉलीलाइन की editable प्रॉपर्टी से पता चलता है कि उपयोगकर्ता, आकार में बदलाव करें. उपयोगकर्ता द्वारा संपादित किए जा सकने वाले आकार देखें देखें. इसी तरह, draggable प्रॉपर्टी को अनुमति देने के लिए सेट किया जा सकता है लाइन खींचने के लिए उपयोगकर्ताओं को चुनना होगा.

// 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;
index.ts

// 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;
index.js

पॉलीलाइन हटाएं

मैप से पॉलीलाइन हटाने के लिए, setMap() तरीके का इस्तेमाल करें null को तर्क के रूप में पास करना. नीचे दिए गए उदाहरण में, flightPath एक पॉलीलाइन ऑब्जेक्ट है:

flightPath.setMap(null);

ध्यान दें कि ऊपर दिया गया तरीका पॉलीलाइन को नहीं मिटाता. यह उसे हटा देता है मैप से पॉलीलाइन हटा दें. इसके बजाय, अगर आपको पॉलीलाइन मिटाना है, तो आपको इसे मैप से हटा देना चाहिए, और फिर पॉलीलाइन को null पर सेट करें.

पॉलीलाइन की जांच करें

पॉलीलाइन, निर्देशांकों की सीरीज़ को LatLng ऑब्जेक्ट. ये निर्देशांक रेखा का पथ तय करते हैं. निर्देशांक फिर से पाने के लिए, getPath() पर कॉल करें, जिससे MVCArray टाइप का अरे देगा. आप नीचे दी गई कार्रवाइयों की मदद से, अरे में बदलाव करें और उनकी जांच करें:

• getAt() दिए गए मान पर LatLng लौटाता है शून्य पर आधारित इंडेक्स वैल्यू का इस्तेमाल करता है.
• insertAt(), पास किया गया LatLng शामिल करता है . ध्यान दें कि कोई भी उस इंडेक्स वैल्यू पर मौजूद निर्देशांक आगे ले जाते हैं.
• removeAt() किसी दिए गए समय पर LatLng को हटाता है शून्य पर आधारित इंडेक्स वैल्यू का इस्तेमाल करता है.

// 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;
index.ts

// 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;
index.js

पॉलीलाइन को पसंद के मुताबिक बनाएं

पॉलीलाइन में वेक्टर के हिसाब से बनाई गई इमेज को सिंबल के तौर पर जोड़ा जा सकता है. एक सिंबल और PolylineOptions क्लास का कॉम्बिनेशन होता है, आपके पास मैप पर पॉलीलाइन के लुक और स्टाइल पर पूरा कंट्रोल होता है. जानकारी के लिए प्रतीक देखें ऐरो के बारे में जानकारी, डैश वाली लाइन, कस्टम सिंबल और ऐनिमेशन वाले सिंबल.

पॉलीगॉन

पॉलीगॉन एक ऐसे क्षेत्र को दर्शाता है जो बंद पथ (या लूप) से घिरा हुआ है, जो निर्देशांकों की किसी शृंखला से तय होता है. Polygon ऑब्जेक्ट, Polyline ऑब्जेक्ट से मिलते-जुलते हैं इनमें निर्देशांकों की एक सीरीज़ के क्रम में होते हैं. पॉलीगॉन, स्ट्रोक और फ़िल से बनाए जाते हैं. आपके पास कस्टम कलर, पॉलीगॉन के किनारे (आघात) और अपारदर्शिता (स्ट्रोक) और कस्टम बंद क्षेत्र (फ़िल) के लिए रंग और अपारदर्शिता. रंग इस प्रकार होने चाहिए हेक्साडेसिमल एचटीएमएल फ़ॉर्मैट में दिखाया जाता है. रंगों के नाम का इस्तेमाल नहीं किया जा सकता.

Polygon ऑब्जेक्ट, मुश्किल आकारों के बारे में बता सकते हैं. इनमें ये शामिल हैं:

• एक पॉलीगॉन द्वारा परिभाषित कई गैर-संतत क्षेत्र.
• उन जगहों को चुनें जिनमें छेद हैं.
• एक या एक से ज़्यादा इलाकों के चौराहे.

कोई जटिल आकार तय करने के लिए, आप एक से ज़्यादा पाथ वाले पॉलीगॉन का इस्तेमाल करें.

ध्यान दें: डेटा लेयर का इस्तेमाल करके, पॉलीगॉन बनाना था. यह आपके लिए पॉलीगॉन विंग को हैंडल करता है, जिससे यह आसान हो जाता है पॉलीगॉन बनाने के लिए, उसमें छेद करें. ज़्यादा जानकारी के लिए, इसके लिए दस्तावेज़ डेटा लेयर.

कोई पॉलीगॉन जोड़ें

बहुभुजीय क्षेत्र में कई अलग-अलग पथ हो सकते हैं, इसलिए Polygon ऑब्जेक्ट की paths प्रॉपर्टी से पता चलता है सरणियों की श्रेणी, जिसमें से हर MVCArray प्रकार. हर अरे ऑर्डर किए गए LatLng निर्देशांक के अलग-अलग क्रम.

केवल एक पथ वाले सरल पॉलीगॉन के लिए, आप सिंगल अरे का इस्तेमाल करके Polygon बनाना LatLng निर्देशांक. Maps JavaScript API को मैन्युअल तरीके से कलेक्शन को स्टोर करने पर, अरे की रेंज में सिंपल अरे paths प्रॉपर्टी में. यह एपीआई, एक पाथ वाले पॉलीगॉन के लिए getPath() तरीका.

पॉलीगॉन की editable प्रॉपर्टी बताती है कि उपयोगकर्ता बदलाव कर सकते हैं या नहीं आकार. नीचे उपयोगकर्ता-बदलाव किए जा सकने वाले आकार देखें. इसी तरह, draggable प्रॉपर्टी को सेट करके, उपयोगकर्ताओं को ये काम करने की अनुमति दी जा सकती है आकृति को खींचें.

// 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;
index.ts

// 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;
index.js

पॉलीगॉन अपने-आप पूरा होना

ऊपर दिए गए उदाहरण में Polygon में चार सेट हैं LatLng निर्देशांक, लेकिन ध्यान दें कि पहले और अंतिम सेट उसी स्थान को परिभाषित करें, जिससे लूप पूरा हो जाता है. हालांकि, व्यावहारिक तौर पर, पॉलीगॉन बंद क्षेत्रों को परिभाषित करते हैं, इसलिए आपको अंतिम निर्देशांकों का एक सेट होता है. Maps JavaScript API अपने-आप पूरा हो जाएगा आखिरी जगह को वापस पहले पेज से कनेक्ट करने वाला पॉलीगॉन स्थान.

नीचे दिया गया उदाहरण पिछले उदाहरण के जैसा है, अंतर को छोड़कर कि आखिरी LatLng को शामिल न किया गया हो: उदाहरण देखें.

पॉलीगॉन हटाएं

मैप से किसी पॉलीगॉन को हटाने के लिए, setMap() तरीके को कॉल करें null को तर्क के रूप में पास करना. नीचे दिए गए उदाहरण में, bermudaTriangle एक पॉलीगॉन ऑब्जेक्ट है:

bermudaTriangle.setMap(null);

ध्यान दें कि ऊपर दिया गया तरीका पॉलीगॉन को नहीं मिटाता. यह उसे हटा देता है पॉलीगॉन को मैप से हटा दें. इसके बजाय यदि आप पॉलीगॉन को हटाना चाहते हैं, तो आपको इसे मैप से हटा देना चाहिए, और फिर पॉलीगॉन को null में बदलें.

पॉलीगॉन की जांच करें

पॉलीगॉन इसके निर्देशांकों की श्रेणी को सरणी के रूप में बताता है होता है, जिसमें हर अरे MVCArray टाइप की होती है. हर "पत्ती" अरे, LatLng निर्देशांक का अरे होता है सिंगल पाथ तय कर रहा है. इन निर्देशांकों को प्राप्त करने के लिए, Polygon ऑब्जेक्ट का getPaths() तरीका. क्योंकि अरे एक MVCArray है, जिसमें आपको हेर-फेर करनी होगी और इसकी जांच करने के लिए, नीचे दी गई कार्रवाइयों की मदद लें:

• getAt() दिए गए मान पर LatLng लौटाता है शून्य पर आधारित इंडेक्स वैल्यू का इस्तेमाल करता है.
• insertAt(), पास किया गया LatLng शामिल करता है . ध्यान दें कि कोई भी उस इंडेक्स वैल्यू पर मौजूद निर्देशांक आगे ले जाते हैं.
• removeAt() किसी दिए गए समय पर LatLng को हटाता है शून्य पर आधारित इंडेक्स वैल्यू का इस्तेमाल करता है.

// 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;
index.ts

// 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;
index.js

पॉलीगॉन में छेद करें

पॉलीगॉन के अंदर एक खाली क्षेत्र बनाने के लिए, आपको दो पथ बनाने होंगे, एक-दूसरे के अंदर. छेद करने के लिए, अंदरूनी हिस्से को बताने वाले निर्देशांक पथ बाहरी पथ को परिभाषित करने वाले पथ के विपरीत होना चाहिए. उदाहरण के लिए, अगर बाहरी पाथ के निर्देशांक घड़ी की सुई की दिशा में हैं तो अंदरूनी पाथ घड़ी की उलटी दिशा में होना चाहिए.

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

नीचे दिए गए उदाहरण में, इनर पाथ के साथ दो पाथ वाला पॉलीगॉन बनाया गया है बाहरी पथ के विपरीत दिशा में घाव.

// 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;
index.ts

// 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;
index.js

आयत

सामान्य Polygon क्लास के अलावा, Google Maps JavaScript API में Rectangle ऑब्जेक्ट को आसानी से बनाने के लिए.

रेक्टैंगल जोड़ें

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

Polygon के विपरीत, आप paths को परिभाषित नहीं करते हैं Rectangle के लिए. इसके बजाय, एक रेक्टैंगल में bounds है प्रॉपर्टी जो रेक्टैंगल के लिए, google.maps.LatLngBounds.

रेक्टैंगल की editable प्रॉपर्टी से पता चलता है कि उपयोगकर्ता, आकार में बदलाव कर सकते हैं. देखें कि उपयोगकर्ता में बदलाव किया जा सकता है या नहीं आकार दिए गए हैं. इसी तरह, आपके पास draggable प्रॉपर्टी को सेट करने का विकल्प भी है उपयोगकर्ताओं को रेक्टैंगल खींचकर बनाने की अनुमति दें.

// 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;
index.ts

// 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;
index.js

जब भी उपयोगकर्ता ज़ूम बदलता है, तब यहां दिया गया कोड एक रेक्टैंगल बनाता है मैप पर. रेक्टैंगल का साइज़, व्यूपोर्ट के हिसाब से तय होता है.

// 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;
index.ts

// 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;
index.js

रेक्टैंगल हटाना

मैप से कोई रेक्टैंगल हटाने के लिए, setMap() तरीके को कॉल करें null को तर्क के रूप में पास करना.

rectangle.setMap(null);

ध्यान दें कि ऊपर दिया गया तरीका रेक्टैंगल को नहीं मिटाता. यह उसे हटा देता है मैप से आयत. इसके बजाय, अगर आपको रेक्टैंगल मिटाना है, तो आपको इसे मैप से हटा देना चाहिए, और फिर खुद को null में रेक्टैंगल कर देगा.

सर्कल्स

सामान्य Polygon क्लास के अलावा, Google Maps JavaScript API में Circle ऑब्जेक्ट को आसानी से बनाने के लिए.

एक मंडली जोड़ें

Circle, Polygon की तरह ही होता है, जिसमें ये काम किए जा सकते हैं वृत्त के किनारे के लिए कस्टम रंग, वज़न, और अपारदर्शिता (ओपैसिटी) को परिभाषित करें ( स्ट्रोक) और कस्टम रंग और अपारदर्शिता ( भरें). रंगों को हेक्साडेसिमल न्यूमेरिक एचटीएमएल स्टाइल में दिखाया जाना चाहिए.

Polygon के विपरीत, आप paths को परिभाषित नहीं करते हैं Circle के लिए. इसके बजाय, एक सर्कल में दो अतिरिक्त प्रॉपर्टी जो इसके आकार को तय करती हैं:

• center, google.maps.LatLng को तय करता है केंद्र की ओर स्क्रोल करें.
• radius, सर्कल की रेडियस की जानकारी मीटर में देता है.

मंडली की editable प्रॉपर्टी निर्दिष्ट करती है कि उपयोगकर्ता बदलाव कर सकते हैं या नहीं आकार. नीचे उपयोगकर्ता-बदलाव किए जा सकने वाले आकार देखें. इसी तरह, draggable प्रॉपर्टी को अनुमति देने के लिए सेट किया जा सकता है सर्कल को खींचें और छोड़ें.

// 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;
index.ts

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;
index.js

कोई मंडली निकालें

मैप से किसी सर्कल को हटाने के लिए, setMap() तरीके को कॉल करें null को तर्क के रूप में पास करना.

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. ध्यान दें कि उत्तर की ओर बढ़ने पर इसका आकार कैसे बदलता है.

उदाहरण देखें

इवेंट में बदलाव करने की सुविधा को सुनना

जब किसी आकार में बदलाव किया जाता है, तो बदलाव पूरा होने पर इवेंट सक्रिय हो जाता है. ये इवेंट नीचे दिए गए हैं.

कुछ काम के कोड स्निपेट:

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.');
});

किसी रेक्टैंगल पर बदलाव करने वाले इवेंट को मैनेज करने का उदाहरण देखें: उदाहरण देखें.

खींचकर छोड़ने वाले इवेंट को सुनना

जब किसी आकार को खींचा जाता है, तो ड्रैग करने की शुरुआत और आखिर में इवेंट ट्रिगर होते हैं खींचने के दौरान भी किया जा सकता है. नीचे दिए गए इवेंट इसके लिए ट्रिगर किए जाते हैं पॉलीलाइन, पॉलीगॉन, सर्कल, और रेक्टैंगल.

इवेंट मैनेज करने के बारे में ज़्यादा जानने के लिए, देखें इवेंट से जुड़े दस्तावेज़.