আকার

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

আপনি আপনার মানচিত্রে বিভিন্ন আকার যোগ করতে পারেন। একটি আকৃতি মানচিত্রের একটি বস্তু, একটি অক্ষাংশ/দ্রাঘিমাংশ স্থানাঙ্কের সাথে আবদ্ধ। নিম্নলিখিত আকারগুলি উপলব্ধ: লাইন , বহুভুজ , বৃত্ত এবং আয়তক্ষেত্র । আপনি আপনার আকারগুলিও কনফিগার করতে পারেন যাতে ব্যবহারকারীরা সেগুলি সম্পাদনা করতে বা টেনে আনতে পারে ৷

পলিলাইন

আপনার মানচিত্রে একটি লাইন আঁকতে, একটি পলিলাইন ব্যবহার করুন। Polyline শ্রেণী মানচিত্রে সংযুক্ত লাইন অংশগুলির একটি রৈখিক ওভারলে সংজ্ঞায়িত করে। একটি Polyline অবজেক্ট LatLng অবস্থানগুলির একটি অ্যারে নিয়ে গঠিত এবং একটি ক্রমানুসারে সেই অবস্থানগুলিকে সংযুক্ত করে এমন একটি লাইন সেগমেন্ট তৈরি করে।

একটি পলিলাইন যোগ করুন

Polyline কনস্ট্রাক্টর পলিলাইনের ভিজ্যুয়াল আচরণ সামঞ্জস্য করার জন্য লাইনের LatLng স্থানাঙ্ক এবং শৈলীগুলির একটি সেট নির্দিষ্ট করে PolylineOptions একটি সেট নেয়।

Polyline অবজেক্টগুলি মানচিত্রের সোজা অংশগুলির একটি সিরিজ হিসাবে আঁকা হয়। আপনি আপনার লাইন নির্মাণ করার সময় PolylineOptions মধ্যে লাইনের স্ট্রোকের জন্য কাস্টম রং, ওজন এবং অস্পষ্টতা নির্দিষ্ট করতে পারেন, অথবা আপনি নির্মাণের পরে সেই বৈশিষ্ট্যগুলি পরিবর্তন করতে পারেন। একটি পলিলাইন নিম্নলিখিত স্ট্রোক শৈলী সমর্থন করে:

  • strokeColor "#FFFFFF" ফরম্যাটের একটি হেক্সাডেসিমেল HTML রঙ নির্দিষ্ট করে। 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 অবজেক্টের অনুরূপ যে তারা একটি ক্রমানুসারে স্থানাঙ্কের একটি সিরিজ নিয়ে গঠিত। বহুভুজ একটি স্ট্রোক এবং একটি পূরণ সঙ্গে আঁকা হয়. আপনি বহুভুজ (স্ট্রোক) এর প্রান্তের জন্য কাস্টম রং, ওজন এবং অস্পষ্টতা এবং আবদ্ধ এলাকার (ফিল) জন্য কাস্টম রং এবং অস্বচ্ছতা সংজ্ঞায়িত করতে পারেন। রঙগুলি হেক্সাডেসিমেল HTML বিন্যাসে নির্দেশিত হওয়া উচিত। রঙের নাম সমর্থিত নয়।

Polygon বস্তু জটিল আকার বর্ণনা করতে পারে, যার মধ্যে রয়েছে:

  • একক বহুভুজ দ্বারা সংজ্ঞায়িত একাধিক অ-সংলগ্ন এলাকা।
  • তাদের মধ্যে গর্ত সঙ্গে এলাকা.
  • এক বা একাধিক এলাকার ছেদ।

একটি জটিল আকৃতি নির্ধারণ করতে, আপনি একাধিক পাথ সহ একটি বহুভুজ ব্যবহার করেন।

দ্রষ্টব্য: ডেটা স্তর বহুভুজ আঁকার একটি সহজ উপায় প্রদান করে। এটি আপনার জন্য বহুভুজ উইন্ডিং পরিচালনা করে, যাতে গর্ত সহ বহুভুজ আঁকা সহজ হয়। ডেটা স্তরের জন্য ডকুমেন্টেশন দেখুন।

একটি বহুভুজ যোগ করুন

যেহেতু একটি বহুভুজ এলাকায় বেশ কয়েকটি পৃথক পাথ অন্তর্ভুক্ত থাকতে পারে, Polygon অবজেক্টের paths সম্পত্তি অ্যারেগুলির একটি অ্যারে নির্দিষ্ট করে, প্রতিটি প্রকার MVCArray । প্রতিটি অ্যারে অর্ডারকৃত LatLng স্থানাঙ্কের একটি পৃথক ক্রম সংজ্ঞায়িত করে।

শুধুমাত্র একটি পথ সমন্বিত সাধারণ বহুভুজের জন্য, আপনি LatLng স্থানাঙ্কের একটি একক অ্যারে ব্যবহার করে একটি Polygon তৈরি করতে পারেন। মানচিত্র জাভাস্ক্রিপ্ট API সাধারণ অ্যারেটিকে paths সম্পত্তির মধ্যে সংরক্ষণ করার সময় নির্মাণের সময় অ্যারের অ্যারেতে রূপান্তর করবে। API একটি পাথ সমন্বিত বহুভুজের জন্য একটি সহজ 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 স্থানাঙ্কের চারটি সেট নিয়ে গঠিত, তবে লক্ষ্য করুন যে প্রথম এবং শেষ সেট একই অবস্থানকে সংজ্ঞায়িত করে, যা লুপটি সম্পূর্ণ করে। অনুশীলনে, যাইহোক, যেহেতু বহুভুজ বদ্ধ এলাকাগুলিকে সংজ্ঞায়িত করে, আপনাকে স্থানাঙ্কের শেষ সেটটি নির্দিষ্ট করতে হবে না। মানচিত্র জাভাস্ক্রিপ্ট 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 ক্লাস ছাড়াও, গুগল ম্যাপ জাভাস্ক্রিপ্ট এপিআই Rectangle বস্তুর জন্য একটি নির্দিষ্ট শ্রেণী অন্তর্ভুক্ত করে, যাতে তাদের নির্মাণ সহজ হয়।

একটি আয়তক্ষেত্র যোগ করুন

একটি Rectangle একটি Polygon মতো যেখানে আপনি আয়তক্ষেত্রের প্রান্তের (স্ট্রোক) জন্য কাস্টম রং, ওজন এবং অস্পষ্টতা এবং আয়তক্ষেত্রের (ফিল) মধ্যে থাকা এলাকার জন্য কাস্টম রং এবং অস্পষ্টতা নির্ধারণ করতে পারেন। রঙগুলি হেক্সাডেসিমেল সংখ্যাসূচক HTML শৈলীতে নির্দেশ করা উচিত।

একটি Polygon থেকে ভিন্ন, আপনি একটি Rectangle জন্য paths সংজ্ঞায়িত করবেন না। পরিবর্তে, একটি আয়তক্ষেত্রের একটি 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 ক্লাস ছাড়াও, গুগল ম্যাপ জাভাস্ক্রিপ্ট এপিআই Circle অবজেক্টের জন্য একটি নির্দিষ্ট ক্লাস অন্তর্ভুক্ত করে, যাতে তাদের নির্মাণ সহজ হয়।

একটি বৃত্ত যোগ করুন

একটি Circle একটি Polygon অনুরূপ যেখানে আপনি বৃত্তের প্রান্তের (স্ট্রোক) জন্য কাস্টম রং, ওজন এবং অস্পষ্টতা এবং বৃত্তের (ফিল) মধ্যে এলাকার জন্য কাস্টম রং এবং অস্পষ্টতা নির্ধারণ করতে পারেন। রঙগুলি হেক্সাডেসিমেল সংখ্যাসূচক HTML শৈলীতে নির্দেশ করা উচিত।

একটি Polygon থেকে ভিন্ন, আপনি একটি Circle জন্য paths সংজ্ঞায়িত করবেন না। পরিবর্তে, একটি বৃত্তের দুটি অতিরিক্ত বৈশিষ্ট্য রয়েছে যা এর আকৃতি নির্ধারণ করে:

  • 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 এ সেট করতে হবে।

ব্যবহারকারী-সম্পাদনাযোগ্য এবং টেনে আনার যোগ্য আকার

একটি আকৃতি সম্পাদনাযোগ্য করা আকৃতিতে হ্যান্ডলগুলিকে যুক্ত করে, যা লোকেরা সরাসরি মানচিত্রে আকৃতিটিকে পুনঃস্থাপন, পুনরায় আকার দিতে এবং পুনরায় আকার দিতে ব্যবহার করতে পারে। আপনি একটি আকৃতিকে টেনে আনার যোগ্যও করতে পারেন, যাতে লোকেরা এটিকে মানচিত্রের একটি ভিন্ন জায়গায় নিয়ে যেতে পারে৷

অবজেক্টে ব্যবহারকারীর করা পরিবর্তনগুলি সেশনের মধ্যে স্থায়ী হয় না। আপনি যদি ব্যবহারকারীর সম্পাদনাগুলি সংরক্ষণ করতে চান তবে আপনাকে অবশ্যই তথ্যটি ক্যাপচার এবং সংরক্ষণ করতে হবে৷

একটি আকৃতি সম্পাদনাযোগ্য করুন

যেকোন আকৃতি (পলিলাইন, বহুভুজ, বৃত্ত, এবং আয়তক্ষেত্র) true বিকল্পগুলিতে editable সেট করে ব্যবহারকারী-সম্পাদনাযোগ্য হিসাবে সেট করা যেতে পারে।

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 ব্যবহারকারী যখন আকৃতিটি টেনে আনা বন্ধ করে তখন বহিস্কার করা হয়।

ইভেন্ট পরিচালনার বিষয়ে আরও জানতে, ইভেন্টের ডকুমেন্টেশন দেখুন।