উচ্চতা উপাদান

উচ্চতা স্বতন্ত্র উপাদান

ElevationElement হল একটি HTML উপাদান যা দৃশ্যত একটি একক বিন্দু বা একটি পলিলাইনের জন্য উচ্চতার ডেটা প্রদর্শন করে। এটি অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্কের অ্যারে সহ path সম্পত্তিতে সেট করা পথ বরাবর উচ্চতার একটি গ্রাফ দেখায়। রেখার অংশগুলি অ্যারের বিন্দুগুলির মধ্যে প্রসারিত হয়, তাই এমনকি অল্প সংখ্যক বিন্দু এখনও একটি বিশদ উচ্চতা গ্রাফ তৈরি করবে।

স্থানাঙ্ক ব্যবহার করে পথের উচ্চতা সেট করুন

নিম্নলিখিত উদাহরণটি gmp-elevation উপাদান ব্যবহার করে স্থানাঙ্কের একটি সেট দ্বারা নির্বাচিত দুটি বিন্দুর মধ্যে একটি পথের উচ্চতা রেন্ডার করে।

উপাদানটি unit-system বৈশিষ্ট্য ব্যবহার করে মেট্রিক পরিমাপের জন্য কনফিগার করা হয়েছে:

  <gmp-elevation unit-system="metric"></gmp-elevation>

একটি querySelector উচ্চতার উপাদান নির্বাচন করতে এবং অক্ষাংশ এবং দ্রাঘিমাংশ স্থানাঙ্কের সাথে এর path বৈশিষ্ট্য সেট করতে ব্যবহৃত হয়:

/** Maps JS loaded callback */
async function init() {
  // Load the Elevation Element from Maps JS
  const {ElevationElement} = await google.maps.importLibrary('elevation');

  // Specify an elevation path to render
  const elevationElement = document.querySelector('gmp-elevation');
  elevationElement.path = [
    {lat: 37.4523, lng: -122.2645},
    {lat: 37.377, lng: -122.4078},
  ];
}

সম্পূর্ণ কোড উদাহরণ দেখুন

জাভাস্ক্রিপ্ট 

/** Maps JS loaded callback */
async function init() {
  // Load the Elevation Element from Maps JS
  const {ElevationElement} = await google.maps.importLibrary('elevation');

  // Specify an elevation path to render
  const elevationElement = document.querySelector('gmp-elevation');
  elevationElement.path = [
    {lat: 37.4523, lng: -122.2645},
    {lat: 37.377, lng: -122.4078},
  ];
}

init();

সিএসএস 

html, body {
  margin: 0;
  padding: 0;
}

gmp-elevation {
  width: 100%;
  height: 100%;
}

.overlay {
  margin: 20px;
  width: 400px;
}

এইচটিএমএল 

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Elevation</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Path elevation</h1>
        <div class="overlay">
          <gmp-elevation unit-system="metric"></gmp-elevation>
        </div>
    <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "YOUR_API_KEY",
        v: "alpha"
      });
    </script>
  </body>
</html>

একটি পলিলাইন ব্যবহার করে পথের উচ্চতা সেট করুন

নিম্নলিখিত উদাহরণটি ব্যবহারকারীর আঁকা পলিলাইনের উপর ভিত্তি করে একটি পথের উচ্চতা রেন্ডার করে। এটি polyline.getPath().getArray() ব্যবহার করে ব্যবহারকারীর পলিলাইন থেকে path পায়।

      elevationElem.path = polyline.getPath().getArray();

সম্পূর্ণ কোড উদাহরণ দেখুন

জাভাস্ক্রিপ্ট 

const map = document.querySelector('gmp-map');
const elevationElem = document.querySelector('gmp-elevation');

async function init() {
  await google.maps.importLibrary('places');
  await google.maps.importLibrary('marker');
  await google.maps.importLibrary('elevation');


  map.innerMap.setOptions({'mapTypeControl': true, 'clickableIcons': false});

  findCurrentLocation();
  drawPolyline();
}

async function drawPolyline() {
  const {DrawingManager} = await google.maps.importLibrary('drawing');
  const drawingManager = new DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYLINE,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.POLYLINE]
    },
    polylineOptions: {geodesic: true, strokeColor: '#5491f5', strokeWeight: 6}
  });

  drawingManager.setMap(map.innerMap);

  drawingManager.addListener('polylinecomplete', (polyline) => {
    console.log('complete');
    console.log(polyline.getPath().getArray());
    elevationElem.path = polyline.getPath().getArray();
    polyline.addListener('click', (e) => {
      console.log(e);
    });
  });
}

async function findCurrentLocation() {
  const {LatLng} = await google.maps.importLibrary('core');
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos =
              new LatLng(position.coords.latitude, position.coords.longitude);
          map.innerMap.panTo(pos);
          map.innerMap.setZoom(16);
        },
        () => {
          console.log('The Geolocation service failed.');
          map.innerMap.setZoom(16);
        },
    );
  } else {
    console.log(`Your browser doesn't support geolocation`);
    map.innerMap.setZoom(16);
  }
}

init();

সিএসএস 

html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 16px;
    text-align: center;
}

gmp-map {
    box-sizing: border-box;
    margin-top: 20px;
    width: 100%;
    height: 100%;
}

gmp-elevation {
    width: 100%;
    height: 300px;
}

.overlay {
    width: 800px;
}

এইচটিএমএল 

<!DOCTYPE html>
<html>
  <head>
    <title>Path Elevation</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Draw polyline and get path elevation</h1>
    <gmp-map center="-37.813,144.963" zoom="12" map-id="DEMO_MAP_ID">
        <div id="elevation-container" class="overlay" slot="control-block-end-inline-center">
          <gmp-elevation unit-system="metric"></gmp-elevation>
        </div>
    </gmp-map>
    <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "YOUR_API_KEY",
        v: "alpha"
      });
    </script>
  </body>
</html>