ویژگی های نقشه برداری

مشاهده نمونه

Maps JavaScript API دو پیاده سازی متفاوت از نقشه را ارائه می دهد: شطرنجی و برداری. نقشه شطرنجی نقشه را به‌عنوان شبکه‌ای از کاشی‌های تصویر شطرنجی مبتنی بر پیکسل بارگیری می‌کند، که توسط پلتفرم نقشه‌های Google در سمت سرور ایجاد می‌شوند، سپس به برنامه وب شما ارائه می‌شوند. نقشه برداری از کاشی های مبتنی بر برداری تشکیل شده است که در زمان بارگذاری در سمت کلاینت با استفاده از WebGL ترسیم می شوند، یک فناوری وب که به مرورگر اجازه می دهد تا به GPU دستگاه کاربر برای ارائه گرافیک های دو بعدی و سه بعدی دسترسی داشته باشد.

نقشه برداری همان نقشه گوگلی است که کاربران شما با آن آشنا هستند و مزایای زیادی نسبت به نقشه کاشی شطرنجی پیش‌فرض ارائه می‌کند، که مهم‌ترین آن وضوح تصاویر مبتنی بر برداری و افزودن ساختمان‌های سه بعدی در سطوح بزرگنمایی نزدیک است. نقشه برداری از این ویژگی ها پشتیبانی می کند:

• کنترل شیب و سرفصل برنامه ای
• کنترل دوربین پیشرفته
• زوم کسری برای بزرگنمایی روانتر

• محتوای سه بعدی و انیمیشن

• برای نقشه‌هایی که با استفاده از عنصر div و جاوا اسکریپت بارگیری می‌شوند، نوع رندر پیش‌فرض google.maps.RenderingType.RASTER است.

• برای نقشه‌هایی که با استفاده از عنصر gmp-map بارگیری می‌شوند، نوع رندر پیش‌فرض google.maps.RenderingType.VECTOR است، با کنترل شیب و عنوان فعال است.

با نقشه برداری شروع کنید

شیب و چرخش

می‌توانید شیب و چرخش (هدینگ) را روی نقشه برداری با گنجاندن ویژگی‌های heading و tilt هنگام مقداردهی اولیه نقشه و با فراخوانی متدهای setTilt و setHeading روی نقشه تنظیم کنید. مثال زیر چند دکمه را به نقشه اضافه می کند که تنظیم شیب و سرفصل را به صورت برنامه ای با افزایش 20 درجه نشان می دهد.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

از حرکات ماوس و صفحه کلید استفاده کنید

اگر تعامل کاربر شیب و چرخش (عنوان) فعال شده باشد (به صورت برنامه‌ریزی یا در Google Cloud Console)، کاربران می‌توانند شیب و چرخش را با استفاده از ماوس و صفحه کلید تنظیم کنند:

• با استفاده از ماوس ، کلید shift را نگه دارید، سپس کلیک کنید و ماوس را به سمت بالا و پایین بکشید تا شیب، راست و چپ را تنظیم کنید.
• با استفاده از صفحه‌کلید ، کلید shift را نگه دارید، سپس از کلیدهای جهت‌نمای بالا و پایین برای تنظیم شیب و از کلیدهای جهت‌نمای راست و چپ برای تنظیم عنوان استفاده کنید.

شیب و عنوان را به صورت برنامه ای تنظیم کنید

از متدهای setTilt() و setHeading() برای تنظیم برنامه نویسی شیب و عنوان روی نقشه برداری استفاده کنید. Heading جهتی است که دوربین در جهت عقربه های ساعت رو به شمال است، بنابراین map.setHeading(90) نقشه را طوری می چرخاند که شرق رو به بالا باشد. زاویه شیب از نقطه اوج اندازه گیری می شود، بنابراین map.setTilt(0) مستقیماً به پایین نگاه می کند، در حالی که map.setTilt(45) یک نمای مایل ایجاد می کند.

• برای تنظیم زاویه شیب نقشه، setTilt() را فراخوانی کنید. از getTilt() برای بدست آوردن مقدار tilt فعلی استفاده کنید.
• برای تنظیم عنوان نقشه، setHeading() را فراخوانی کنید. getHeading() برای بدست آوردن مقدار عنوان فعلی استفاده کنید.

برای تغییر مرکز نقشه با حفظ tilt و heading، از map.setCenter() یا map.panBy() استفاده کنید.

توجه داشته باشید که محدوده زوایای قابل استفاده با سطح زوم فعلی متفاوت است. مقادیر خارج از این محدوده به محدوده مجاز فعلی متصل می شوند.

همچنین می‌توانید از متد moveCamera برای تغییر سرفصل، شیب، مرکز و بزرگنمایی برنامه‌نویسی استفاده کنید. بیشتر بدانید .

تاثیر بر روش های دیگر

وقتی شیب یا چرخش روی نقشه اعمال می شود، رفتار سایر روش های Maps JavaScript API تحت تأثیر قرار می گیرد:

• map.getBounds() همیشه کوچکترین کادر مرزی که شامل ناحیه قابل مشاهده است را برمی گرداند. هنگامی که شیب اعمال می شود، کران های برگشتی ممکن است ناحیه بزرگتری را نسبت به ناحیه قابل مشاهده درگاه نمای نقشه نشان دهند.
• map.fitBounds() tilt و رفتن به صفر را قبل از برازش کرانها بازنشانی می کند.
• map.panToBounds() tilt را بازنشانی می کند و قبل از حرکت مرزها به صفر می رسد.
• map.setTilt() هر مقداری را می پذیرد، اما حداکثر شیب را بر اساس سطح زوم نقشه فعلی محدود می کند.
• map.setHeading() هر مقداری را می پذیرد و آن را طوری تغییر می دهد که در محدوده [0, 360] قرار گیرد.

دوربین را کنترل کنید

از تابع map.moveCamera() برای به روز رسانی هر ترکیبی از ویژگی های دوربین به طور همزمان استفاده کنید. map.moveCamera() یک پارامتر واحد را می پذیرد که شامل تمام ویژگی های دوربین برای به روز رسانی باشد. مثال زیر فراخوانی map.moveCamera() برای تنظیم center ، zoom ، heading و tilt به طور همزمان نشان می دهد:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

همانطور که در اینجا نشان داده شده است، می توانید با فراخوانی map.moveCamera() با یک حلقه انیمیشن، ویژگی های دوربین را متحرک کنید:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

موقعیت دوربین

نمای نقشه به صورت دوربینی که از پایین در یک صفحه صاف نگاه می کند، مدل سازی شده است. موقعیت دوربین (و در نتیجه رندر نقشه) با ویژگی های زیر مشخص می شود: هدف (موقعیت طول و عرض جغرافیایی) ، بلبرینگ ، شیب ، و بزرگنمایی .

هدف (مکان)

هدف دوربین محل مرکز نقشه است که به صورت مختصات طول و عرض جغرافیایی مشخص شده است.

بلبرینگ (جهت گیری)

بلبرینگ دوربین جهت قطب نما را مشخص می کند که بر حسب درجه از شمال واقعی، مطابق با لبه بالای نقشه اندازه گیری می شود. اگر یک خط عمودی از مرکز نقشه تا لبه بالایی نقشه بکشید، بلبرینگ با عنوان دوربین (اندازه‌گیری شده بر حسب درجه) نسبت به شمال واقعی مطابقت دارد.

یاتاقان 0 به این معنی است که بالای نقشه به شمال واقعی اشاره می کند. مقدار باربری 90 به معنای بالای نقاط نقشه به سمت شرق است (90 درجه روی قطب نما). مقدار 180 به معنای بالای نقاط نقشه به سمت جنوب است.

Maps API به شما امکان می دهد بلبرینگ نقشه را تغییر دهید. به عنوان مثال، شخصی که رانندگی می کند اغلب نقشه راه را می چرخاند تا آن را با جهت سفر خود هماهنگ کند، در حالی که کوهنوردانی که از نقشه و قطب نما استفاده می کنند معمولاً نقشه را طوری جهت می دهند که یک خط عمودی به سمت شمال باشد.

شیب (زاویه دید)

شیب موقعیت دوربین را روی یک قوس مستقیماً بر روی موقعیت مرکزی نقشه مشخص می‌کند که بر حسب درجه از نادر اندازه‌گیری می‌شود (جهتی که مستقیماً به زیر دوربین اشاره می‌کند). مقدار 0 مربوط به دوربینی است که مستقیماً به سمت پایین است. مقادیر بیشتر از 0 مربوط به دوربینی است که با تعداد درجه مشخصی به سمت افق کشیده شده است. وقتی زاویه دید را تغییر می‌دهید، نقشه در پرسپکتیو ظاهر می‌شود و ویژگی‌های دور کوچک‌تر و ویژگی‌های نزدیک بزرگ‌تر ظاهر می‌شوند. تصاویر زیر این را نشان می دهد.

در تصاویر زیر زاویه دید 0 درجه است. تصویر اول شماتیکی از این را نشان می دهد. موقعیت 1 موقعیت دوربین و موقعیت 2 موقعیت فعلی نقشه است. نقشه حاصل در زیر آن نشان داده شده است.

در تصاویر زیر زاویه دید 45 درجه است. توجه داشته باشید که دوربین در نیمه راه در امتداد قوس بین مستقیم بالای سر (0 درجه) و زمین (90 درجه) به موقعیت 3 حرکت می کند. دوربین همچنان به نقطه مرکزی نقشه اشاره می کند، اما منطقه ای که با خط در موقعیت 4 نشان داده شده است اکنون قابل مشاهده است.

نقشه در این اسکرین شات همچنان در همان نقطه در نقشه اصلی قرار دارد، اما ویژگی های بیشتری در بالای نقشه ظاهر شده است. با افزایش زاویه بیش از 45 درجه، ویژگی‌های بین دوربین و موقعیت نقشه به نسبت بزرگتر به نظر می‌رسند، در حالی که ویژگی‌های فراتر از موقعیت نقشه نسبتاً کوچک‌تر به نظر می‌رسند و جلوه‌ای سه‌بعدی ایجاد می‌کنند.

بزرگنمایی ضربه بزنید؛

سطح زوم دوربین مقیاس نقشه را تعیین می کند. در سطوح بزرگنمایی بزرگتر، جزئیات بیشتری روی صفحه نمایش دیده می شود، در حالی که در سطوح بزرگنمایی کوچکتر، می توان بیشتر جهان را روی صفحه مشاهده کرد.

لازم نیست سطح بزرگنمایی یک عدد صحیح باشد. محدوده سطوح بزرگنمایی مجاز توسط نقشه به عوامل مختلفی از جمله هدف، نوع نقشه و اندازه صفحه بستگی دارد. هر عدد خارج از محدوده به نزدیکترین مقدار معتبر بعدی تبدیل می شود که می تواند حداقل سطح بزرگنمایی یا حداکثر سطح بزرگنمایی باشد. لیست زیر سطح تقریبی جزئیاتی را که می‌توانید انتظار داشته باشید در هر سطح بزرگ‌نمایی ببینید را نشان می‌دهد:

• 1: جهان
• 5: خشکی / قاره
• 10: شهر
• 15: خیابان ها
• 20: ساختمان ها

زوم کسری

نقشه های برداری از زوم کسری پشتیبانی می کنند، که به شما امکان می دهد با استفاده از مقادیر کسری به جای اعداد صحیح بزرگنمایی کنید. در حالی که هر دو نقشه شطرنجی و برداری از زوم کسری پشتیبانی می کنند، بزرگنمایی کسری به طور پیش فرض برای نقشه های برداری روشن است و به طور پیش فرض برای نقشه های شطرنجی خاموش است. از گزینه isFractionalZoomEnabled map برای روشن و خاموش کردن زوم کسری استفاده کنید.

مثال زیر فعال کردن زوم کسری را هنگام شروع اولیه نقشه نشان می دهد:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

همچنین می‌توانید زوم کسری را با تنظیم گزینه isFractionalZoomEnabled map همانطور که در اینجا نشان داده شده است روشن و خاموش کنید:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

می‌توانید شنونده‌ای تنظیم کنید تا تشخیص دهد بزرگ‌نمایی کسری روشن است یا خیر. اگر به طور صریح isFractionalZoomEnabled روی true یا false تنظیم نکرده باشید، بسیار مفید است. کد مثال زیر بررسی می کند که آیا بزرگنمایی کسری فعال است یا خیر:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});

مشاهده نمونه

Maps JavaScript API دو پیاده سازی متفاوت از نقشه را ارائه می دهد: شطرنجی و برداری. نقشه شطرنجی نقشه را به‌عنوان شبکه‌ای از کاشی‌های تصویر شطرنجی مبتنی بر پیکسل بارگیری می‌کند، که توسط پلتفرم نقشه‌های Google در سمت سرور ایجاد می‌شوند، سپس به برنامه وب شما ارائه می‌شوند. نقشه برداری از کاشی های مبتنی بر برداری تشکیل شده است که در زمان بارگذاری در سمت کلاینت با استفاده از WebGL ترسیم می شوند، یک فناوری وب که به مرورگر اجازه می دهد تا به GPU دستگاه کاربر برای ارائه گرافیک های دو بعدی و سه بعدی دسترسی داشته باشد.

نقشه برداری همان نقشه گوگلی است که کاربران شما با آن آشنا هستند و مزایای زیادی نسبت به نقشه کاشی شطرنجی پیش‌فرض ارائه می‌کند، که مهم‌ترین آن وضوح تصاویر مبتنی بر برداری و افزودن ساختمان‌های سه بعدی در سطوح بزرگنمایی نزدیک است. نقشه برداری از این ویژگی ها پشتیبانی می کند:

• کنترل شیب و سرفصل برنامه ای
• کنترل دوربین پیشرفته
• زوم کسری برای بزرگنمایی روانتر

• محتوای سه بعدی و انیمیشن

• برای نقشه‌هایی که با استفاده از عنصر div و جاوا اسکریپت بارگیری می‌شوند، نوع رندر پیش‌فرض google.maps.RenderingType.RASTER است.

• برای نقشه‌هایی که با استفاده از عنصر gmp-map بارگیری می‌شوند، نوع رندر پیش‌فرض google.maps.RenderingType.VECTOR است، با کنترل شیب و عنوان فعال است.

با نقشه برداری شروع کنید

شیب و چرخش

می‌توانید شیب و چرخش (هدینگ) را روی نقشه برداری با گنجاندن ویژگی‌های heading و tilt هنگام مقداردهی اولیه نقشه و با فراخوانی متدهای setTilt و setHeading روی نقشه تنظیم کنید. مثال زیر چند دکمه را به نقشه اضافه می کند که تنظیم شیب و سرفصل را به صورت برنامه ای با افزایش 20 درجه نشان می دهد.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

از حرکات ماوس و صفحه کلید استفاده کنید

اگر تعامل کاربر شیب و چرخش (عنوان) فعال شده باشد (به صورت برنامه‌ریزی یا در Google Cloud Console)، کاربران می‌توانند شیب و چرخش را با استفاده از ماوس و صفحه کلید تنظیم کنند:

• با استفاده از ماوس ، کلید shift را نگه دارید، سپس کلیک کنید و ماوس را به سمت بالا و پایین بکشید تا شیب، راست و چپ را تنظیم کنید.
• با استفاده از صفحه‌کلید ، کلید shift را نگه دارید، سپس از کلیدهای جهت‌نمای بالا و پایین برای تنظیم شیب و از کلیدهای جهت‌نمای راست و چپ برای تنظیم عنوان استفاده کنید.

شیب و عنوان را به صورت برنامه ای تنظیم کنید

از متدهای setTilt() و setHeading() برای تنظیم برنامه نویسی شیب و عنوان روی نقشه برداری استفاده کنید. Heading جهتی است که دوربین در جهت عقربه های ساعت رو به شمال است، بنابراین map.setHeading(90) نقشه را طوری می چرخاند که شرق رو به بالا باشد. زاویه شیب از نقطه اوج اندازه گیری می شود، بنابراین map.setTilt(0) مستقیماً به پایین نگاه می کند، در حالی که map.setTilt(45) یک نمای مایل ایجاد می کند.

• برای تنظیم زاویه شیب نقشه، setTilt() را فراخوانی کنید. از getTilt() برای بدست آوردن مقدار tilt فعلی استفاده کنید.
• برای تنظیم عنوان نقشه، setHeading() را فراخوانی کنید. getHeading() برای بدست آوردن مقدار عنوان فعلی استفاده کنید.

برای تغییر مرکز نقشه با حفظ tilt و heading، از map.setCenter() یا map.panBy() استفاده کنید.

توجه داشته باشید که محدوده زوایای قابل استفاده با سطح زوم فعلی متفاوت است. مقادیر خارج از این محدوده به محدوده مجاز فعلی متصل می شوند.

همچنین می‌توانید از متد moveCamera برای تغییر سرفصل، شیب، مرکز و بزرگنمایی برنامه‌نویسی استفاده کنید. بیشتر بدانید .

تاثیر بر روش های دیگر

وقتی شیب یا چرخش روی نقشه اعمال می شود، رفتار سایر روش های Maps JavaScript API تحت تأثیر قرار می گیرد:

• map.getBounds() همیشه کوچکترین کادر مرزی که شامل ناحیه قابل مشاهده است را برمی گرداند. هنگامی که شیب اعمال می شود، کران های برگشتی ممکن است ناحیه بزرگتری را نسبت به ناحیه قابل مشاهده درگاه نمای نقشه نشان دهند.
• map.fitBounds() tilt و رفتن به صفر را قبل از برازش کرانها بازنشانی می کند.
• map.panToBounds() tilt را بازنشانی می کند و قبل از حرکت مرزها به صفر می رسد.
• map.setTilt() هر مقداری را می پذیرد، اما حداکثر شیب را بر اساس سطح زوم نقشه فعلی محدود می کند.
• map.setHeading() هر مقداری را می پذیرد و آن را طوری تغییر می دهد که در محدوده [0, 360] قرار گیرد.

دوربین را کنترل کنید

از تابع map.moveCamera() برای به روز رسانی هر ترکیبی از ویژگی های دوربین به طور همزمان استفاده کنید. map.moveCamera() یک پارامتر واحد را می پذیرد که شامل تمام ویژگی های دوربین برای به روز رسانی باشد. مثال زیر فراخوانی map.moveCamera() برای تنظیم center ، zoom ، heading و tilt به طور همزمان نشان می دهد:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

همانطور که در اینجا نشان داده شده است، می توانید با فراخوانی map.moveCamera() با یک حلقه انیمیشن، ویژگی های دوربین را متحرک کنید:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

موقعیت دوربین

نمای نقشه به صورت دوربینی که از پایین در یک صفحه صاف نگاه می کند، مدل سازی شده است. موقعیت دوربین (و در نتیجه رندر نقشه) با ویژگی های زیر مشخص می شود: هدف (موقعیت طول و عرض جغرافیایی) ، بلبرینگ ، شیب ، و بزرگنمایی .

هدف (مکان)

هدف دوربین محل مرکز نقشه است که به صورت مختصات طول و عرض جغرافیایی مشخص شده است.

بلبرینگ (جهت گیری)

بلبرینگ دوربین جهت قطب نما را مشخص می کند که بر حسب درجه از شمال واقعی، مطابق با لبه بالای نقشه اندازه گیری می شود. اگر یک خط عمودی از مرکز نقشه تا لبه بالایی نقشه بکشید، بلبرینگ با عنوان دوربین (اندازه‌گیری شده بر حسب درجه) نسبت به شمال واقعی مطابقت دارد.

یاتاقان 0 به این معنی است که بالای نقشه به شمال واقعی اشاره می کند. مقدار باربری 90 به معنای بالای نقاط نقشه به سمت شرق است (90 درجه روی قطب نما). مقدار 180 به معنای بالای نقاط نقشه به سمت جنوب است.

Maps API به شما امکان می دهد بلبرینگ نقشه را تغییر دهید. به عنوان مثال، شخصی که رانندگی می کند اغلب نقشه راه را می چرخاند تا آن را با جهت سفر خود هماهنگ کند، در حالی که کوهنوردانی که از نقشه و قطب نما استفاده می کنند معمولاً نقشه را طوری جهت می دهند که یک خط عمودی به سمت شمال باشد.

شیب (زاویه دید)

شیب موقعیت دوربین را روی یک قوس مستقیماً بر روی موقعیت مرکزی نقشه مشخص می‌کند که بر حسب درجه از نادر اندازه‌گیری می‌شود (جهتی که مستقیماً به زیر دوربین اشاره می‌کند). مقدار 0 مربوط به دوربینی است که مستقیماً به سمت پایین است. مقادیر بیشتر از 0 مربوط به دوربینی است که با تعداد درجه مشخصی به سمت افق کشیده شده است. وقتی زاویه دید را تغییر می‌دهید، نقشه در پرسپکتیو ظاهر می‌شود و ویژگی‌های دور کوچک‌تر و ویژگی‌های نزدیک بزرگ‌تر ظاهر می‌شوند. تصاویر زیر این را نشان می دهد.

در تصاویر زیر زاویه دید 0 درجه است. تصویر اول شماتیکی از این را نشان می دهد. موقعیت 1 موقعیت دوربین و موقعیت 2 موقعیت فعلی نقشه است. نقشه حاصل در زیر آن نشان داده شده است.

در تصاویر زیر زاویه دید 45 درجه است. توجه داشته باشید که دوربین در نیمه راه در امتداد قوس بین مستقیم بالای سر (0 درجه) و زمین (90 درجه) به موقعیت 3 حرکت می کند. دوربین همچنان به نقطه مرکزی نقشه اشاره می کند، اما منطقه ای که با خط در موقعیت 4 نشان داده شده است اکنون قابل مشاهده است.

نقشه در این اسکرین شات همچنان در همان نقطه در نقشه اصلی قرار دارد، اما ویژگی های بیشتری در بالای نقشه ظاهر شده است. با افزایش زاویه بیش از 45 درجه، ویژگی‌های بین دوربین و موقعیت نقشه به نسبت بزرگتر به نظر می‌رسند، در حالی که ویژگی‌های فراتر از موقعیت نقشه نسبتاً کوچک‌تر به نظر می‌رسند و جلوه‌ای سه‌بعدی ایجاد می‌کنند.

بزرگنمایی ضربه بزنید؛

سطح زوم دوربین مقیاس نقشه را تعیین می کند. در سطوح بزرگنمایی بزرگتر، جزئیات بیشتری روی صفحه نمایش دیده می شود، در حالی که در سطوح بزرگنمایی کوچکتر، می توان بیشتر جهان را روی صفحه مشاهده کرد.

لازم نیست سطح بزرگنمایی یک عدد صحیح باشد. محدوده سطوح بزرگنمایی مجاز توسط نقشه به عوامل مختلفی از جمله هدف، نوع نقشه و اندازه صفحه بستگی دارد. هر عدد خارج از محدوده به نزدیکترین مقدار معتبر بعدی تبدیل می شود که می تواند حداقل سطح بزرگنمایی یا حداکثر سطح بزرگنمایی باشد. لیست زیر سطح تقریبی جزئیاتی را که می‌توانید انتظار داشته باشید در هر سطح بزرگ‌نمایی ببینید را نشان می‌دهد:

• 1: جهان
• 5: خشکی / قاره
• 10: شهر
• 15: خیابان ها
• 20: ساختمان ها

زوم کسری

نقشه های برداری از زوم کسری پشتیبانی می کنند، که به شما امکان می دهد با استفاده از مقادیر کسری به جای اعداد صحیح بزرگنمایی کنید. در حالی که هر دو نقشه شطرنجی و برداری از زوم کسری پشتیبانی می کنند، بزرگنمایی کسری به طور پیش فرض برای نقشه های برداری روشن است و به طور پیش فرض برای نقشه های شطرنجی خاموش است. از گزینه isFractionalZoomEnabled map برای روشن و خاموش کردن زوم کسری استفاده کنید.

مثال زیر فعال کردن زوم کسری را هنگام شروع اولیه نقشه نشان می دهد:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

همچنین می‌توانید زوم کسری را با تنظیم گزینه isFractionalZoomEnabled map همانطور که در اینجا نشان داده شده است روشن و خاموش کنید:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

می‌توانید شنونده‌ای تنظیم کنید تا تشخیص دهد بزرگ‌نمایی کسری روشن است یا خیر. اگر به طور صریح isFractionalZoomEnabled روی true یا false تنظیم نکرده باشید، بسیار مفید است. کد مثال زیر بررسی می کند که آیا بزرگنمایی کسری فعال است یا خیر:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});

مشاهده نمونه

Maps JavaScript API دو پیاده سازی متفاوت از نقشه را ارائه می دهد: شطرنجی و برداری. نقشه شطرنجی نقشه را به‌عنوان شبکه‌ای از کاشی‌های تصویر شطرنجی مبتنی بر پیکسل بارگیری می‌کند، که توسط پلتفرم نقشه‌های Google در سمت سرور ایجاد می‌شوند، سپس به برنامه وب شما ارائه می‌شوند. نقشه برداری از کاشی های مبتنی بر برداری تشکیل شده است که در زمان بارگذاری در سمت کلاینت با استفاده از WebGL ترسیم می شوند، یک فناوری وب که به مرورگر اجازه می دهد تا به GPU دستگاه کاربر برای ارائه گرافیک های دو بعدی و سه بعدی دسترسی داشته باشد.

نقشه برداری همان نقشه گوگلی است که کاربران شما با آن آشنا هستند و مزایای زیادی نسبت به نقشه کاشی شطرنجی پیش‌فرض ارائه می‌کند، که مهم‌ترین آن وضوح تصاویر مبتنی بر برداری و افزودن ساختمان‌های سه بعدی در سطوح بزرگنمایی نزدیک است. نقشه برداری از این ویژگی ها پشتیبانی می کند:

• کنترل شیب و سرفصل برنامه ای
• کنترل دوربین پیشرفته
• زوم کسری برای بزرگنمایی روانتر

• محتوای سه بعدی و انیمیشن

• برای نقشه‌هایی که با استفاده از عنصر div و جاوا اسکریپت بارگیری می‌شوند، نوع رندر پیش‌فرض google.maps.RenderingType.RASTER است.

• برای نقشه‌هایی که با استفاده از عنصر gmp-map بارگیری می‌شوند، نوع رندر پیش‌فرض google.maps.RenderingType.VECTOR است، با کنترل شیب و عنوان فعال است.

با نقشه برداری شروع کنید

شیب و چرخش

می‌توانید شیب و چرخش (هدینگ) را روی نقشه برداری با گنجاندن ویژگی‌های heading و tilt هنگام مقداردهی اولیه نقشه و با فراخوانی متدهای setTilt و setHeading روی نقشه تنظیم کنید. مثال زیر چند دکمه را به نقشه اضافه می کند که تنظیم شیب و سرفصل را به صورت برنامه ای با افزایش 20 درجه نشان می دهد.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

از حرکات ماوس و صفحه کلید استفاده کنید

اگر تعامل کاربر شیب و چرخش (عنوان) فعال شده باشد (به صورت برنامه‌ریزی یا در Google Cloud Console)، کاربران می‌توانند شیب و چرخش را با استفاده از ماوس و صفحه کلید تنظیم کنند:

• با استفاده از ماوس ، کلید shift را نگه دارید، سپس کلیک کنید و ماوس را به سمت بالا و پایین بکشید تا شیب، راست و چپ را تنظیم کنید.
• با استفاده از صفحه‌کلید ، کلید shift را نگه دارید، سپس از کلیدهای جهت‌نمای بالا و پایین برای تنظیم شیب و از کلیدهای جهت‌نمای راست و چپ برای تنظیم عنوان استفاده کنید.

شیب و عنوان را به صورت برنامه ای تنظیم کنید

از متدهای setTilt() و setHeading() برای تنظیم برنامه نویسی شیب و عنوان روی نقشه برداری استفاده کنید. Heading جهتی است که دوربین در جهت عقربه های ساعت رو به شمال است، بنابراین map.setHeading(90) نقشه را طوری می چرخاند که شرق رو به بالا باشد. زاویه شیب از نقطه اوج اندازه گیری می شود، بنابراین map.setTilt(0) مستقیماً به پایین نگاه می کند، در حالی که map.setTilt(45) یک نمای مایل ایجاد می کند.

• برای تنظیم زاویه شیب نقشه، setTilt() را فراخوانی کنید. از getTilt() برای بدست آوردن مقدار tilt فعلی استفاده کنید.
• برای تنظیم عنوان نقشه، setHeading() را فراخوانی کنید. getHeading() برای بدست آوردن مقدار عنوان فعلی استفاده کنید.

برای تغییر مرکز نقشه با حفظ tilt و heading، از map.setCenter() یا map.panBy() استفاده کنید.

توجه داشته باشید که محدوده زوایای قابل استفاده با سطح زوم فعلی متفاوت است. مقادیر خارج از این محدوده به محدوده مجاز فعلی متصل می شوند.

همچنین می‌توانید از متد moveCamera برای تغییر سرفصل، شیب، مرکز و بزرگنمایی برنامه‌نویسی استفاده کنید. بیشتر بدانید .

تاثیر بر روش های دیگر

وقتی شیب یا چرخش روی نقشه اعمال می شود، رفتار سایر روش های Maps JavaScript API تحت تأثیر قرار می گیرد:

• map.getBounds() همیشه کوچکترین کادر مرزی که شامل ناحیه قابل مشاهده است را برمی گرداند. هنگامی که شیب اعمال می شود، کران های برگشتی ممکن است ناحیه بزرگتری را نسبت به ناحیه قابل مشاهده درگاه نمای نقشه نشان دهند.
• map.fitBounds() tilt و رفتن به صفر را قبل از برازش کرانها بازنشانی می کند.
• map.panToBounds() tilt را بازنشانی می کند و قبل از حرکت مرزها به صفر می رسد.
• map.setTilt() هر مقداری را می پذیرد، اما حداکثر شیب را بر اساس سطح زوم نقشه فعلی محدود می کند.
• map.setHeading() هر مقداری را می پذیرد و آن را طوری تغییر می دهد که در محدوده [0, 360] قرار گیرد.

دوربین را کنترل کنید

از تابع map.moveCamera() برای به روز رسانی هر ترکیبی از ویژگی های دوربین به طور همزمان استفاده کنید. map.moveCamera() یک پارامتر واحد را می پذیرد که شامل تمام ویژگی های دوربین برای به روز رسانی باشد. مثال زیر فراخوانی map.moveCamera() برای تنظیم center ، zoom ، heading و tilt به طور همزمان نشان می دهد:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

همانطور که در اینجا نشان داده شده است، می توانید با فراخوانی map.moveCamera() با یک حلقه انیمیشن، ویژگی های دوربین را متحرک کنید:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

موقعیت دوربین

نمای نقشه به صورت دوربینی که از پایین در یک صفحه صاف نگاه می کند، مدل سازی شده است. موقعیت دوربین (و در نتیجه رندر نقشه) با ویژگی های زیر مشخص می شود: هدف (موقعیت طول و عرض جغرافیایی) ، بلبرینگ ، شیب ، و بزرگنمایی .

هدف (مکان)

هدف دوربین محل مرکز نقشه است که به صورت مختصات طول و عرض جغرافیایی مشخص شده است.

بلبرینگ (جهت گیری)

بلبرینگ دوربین جهت قطب نما را مشخص می کند که بر حسب درجه از شمال واقعی، مطابق با لبه بالای نقشه اندازه گیری می شود. اگر یک خط عمودی از مرکز نقشه تا لبه بالایی نقشه بکشید، بلبرینگ با عنوان دوربین (اندازه‌گیری شده بر حسب درجه) نسبت به شمال واقعی مطابقت دارد.

یاتاقان 0 به این معنی است که بالای نقشه به شمال واقعی اشاره می کند. مقدار باربری 90 به معنای بالای نقاط نقشه به سمت شرق است (90 درجه روی قطب نما). مقدار 180 به معنای بالای نقاط نقشه به سمت جنوب است.

Maps API به شما امکان می دهد بلبرینگ نقشه را تغییر دهید. به عنوان مثال، شخصی که رانندگی می کند اغلب نقشه راه را می چرخاند تا آن را با جهت سفر خود هماهنگ کند، در حالی که کوهنوردانی که از نقشه و قطب نما استفاده می کنند معمولاً نقشه را طوری جهت می دهند که یک خط عمودی به سمت شمال باشد.

شیب (زاویه دید)

شیب موقعیت دوربین را روی یک قوس مستقیماً بر روی موقعیت مرکزی نقشه مشخص می‌کند که بر حسب درجه از نادر اندازه‌گیری می‌شود (جهتی که مستقیماً به زیر دوربین اشاره می‌کند). مقدار 0 مربوط به دوربینی است که مستقیماً به سمت پایین است. مقادیر بیشتر از 0 مربوط به دوربینی است که با تعداد درجه مشخصی به سمت افق کشیده شده است. وقتی زاویه دید را تغییر می‌دهید، نقشه در پرسپکتیو ظاهر می‌شود و ویژگی‌های دور کوچک‌تر و ویژگی‌های نزدیک بزرگ‌تر ظاهر می‌شوند. تصاویر زیر این را نشان می دهد.

در تصاویر زیر زاویه دید 0 درجه است. تصویر اول شماتیکی از این را نشان می دهد. موقعیت 1 موقعیت دوربین و موقعیت 2 موقعیت فعلی نقشه است. نقشه حاصل در زیر آن نشان داده شده است.

در تصاویر زیر زاویه دید 45 درجه است. توجه داشته باشید که دوربین در نیمه راه در امتداد قوس بین مستقیم بالای سر (0 درجه) و زمین (90 درجه) به موقعیت 3 حرکت می کند. دوربین همچنان به نقطه مرکزی نقشه اشاره می کند، اما منطقه ای که با خط در موقعیت 4 نشان داده شده است اکنون قابل مشاهده است.

نقشه در این اسکرین شات همچنان در همان نقطه در نقشه اصلی قرار دارد، اما ویژگی های بیشتری در بالای نقشه ظاهر شده است. با افزایش زاویه بیش از 45 درجه، ویژگی‌های بین دوربین و موقعیت نقشه به نسبت بزرگتر به نظر می‌رسند، در حالی که ویژگی‌های فراتر از موقعیت نقشه نسبتاً کوچک‌تر به نظر می‌رسند و جلوه‌ای سه‌بعدی ایجاد می‌کنند.

بزرگنمایی ضربه بزنید؛

سطح زوم دوربین مقیاس نقشه را تعیین می کند. در سطوح بزرگنمایی بزرگتر، جزئیات بیشتری روی صفحه نمایش دیده می شود، در حالی که در سطوح بزرگنمایی کوچکتر، می توان بیشتر جهان را روی صفحه مشاهده کرد.

لازم نیست سطح بزرگنمایی یک عدد صحیح باشد. محدوده سطوح بزرگنمایی مجاز توسط نقشه به عوامل مختلفی از جمله هدف، نوع نقشه و اندازه صفحه بستگی دارد. هر عدد خارج از محدوده به نزدیکترین مقدار معتبر بعدی تبدیل می شود که می تواند حداقل سطح بزرگنمایی یا حداکثر سطح بزرگنمایی باشد. لیست زیر سطح تقریبی جزئیاتی را که می‌توانید انتظار داشته باشید در هر سطح بزرگ‌نمایی ببینید را نشان می‌دهد:

• 1: جهان
• 5: خشکی / قاره
• 10: شهر
• 15: خیابان ها
• 20: ساختمان ها

زوم کسری

نقشه های برداری از زوم کسری پشتیبانی می کنند، که به شما امکان می دهد با استفاده از مقادیر کسری به جای اعداد صحیح بزرگنمایی کنید. در حالی که هر دو نقشه شطرنجی و برداری از زوم کسری پشتیبانی می کنند، بزرگنمایی کسری به طور پیش فرض برای نقشه های برداری روشن است و به طور پیش فرض برای نقشه های شطرنجی خاموش است. از گزینه isFractionalZoomEnabled map برای روشن و خاموش کردن زوم کسری استفاده کنید.

مثال زیر فعال کردن زوم کسری را هنگام شروع اولیه نقشه نشان می دهد:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

همچنین می‌توانید زوم کسری را با تنظیم گزینه isFractionalZoomEnabled map همانطور که در اینجا نشان داده شده است روشن و خاموش کنید:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

می‌توانید شنونده‌ای تنظیم کنید تا تشخیص دهد بزرگ‌نمایی کسری روشن است یا خیر. اگر به طور صریح isFractionalZoomEnabled روی true یا false تنظیم نکرده باشید، بسیار مفید است. کد مثال زیر بررسی می کند که آیا بزرگنمایی کسری فعال است یا خیر:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});

مشاهده نمونه

Maps JavaScript API دو پیاده سازی متفاوت از نقشه را ارائه می دهد: شطرنجی و برداری. نقشه شطرنجی نقشه را به‌عنوان شبکه‌ای از کاشی‌های تصویر شطرنجی مبتنی بر پیکسل بارگیری می‌کند، که توسط پلتفرم نقشه‌های Google در سمت سرور ایجاد می‌شوند، سپس به برنامه وب شما ارائه می‌شوند. نقشه برداری از کاشی های مبتنی بر برداری تشکیل شده است که در زمان بارگذاری در سمت کلاینت با استفاده از WebGL ترسیم می شوند، یک فناوری وب که به مرورگر اجازه می دهد تا به GPU دستگاه کاربر برای ارائه گرافیک های دو بعدی و سه بعدی دسترسی داشته باشد.

نقشه برداری همان نقشه گوگلی است که کاربران شما با آن آشنا هستند و مزایای زیادی نسبت به نقشه کاشی شطرنجی پیش‌فرض ارائه می‌کند، که مهم‌ترین آن وضوح تصاویر مبتنی بر برداری و افزودن ساختمان‌های سه بعدی در سطوح بزرگنمایی نزدیک است. نقشه برداری از این ویژگی ها پشتیبانی می کند:

• کنترل شیب و سرفصل برنامه ای
• کنترل دوربین پیشرفته
• زوم کسری برای بزرگنمایی روانتر

• محتوای سه بعدی و انیمیشن

• برای نقشه های بارگذاری شده با استفاده از یک عنصر div و JavaScript ، نوع ارائه پیش فرض google.maps.RenderingType.RASTER است.

• برای نقشه های بارگذاری شده با استفاده از عنصر gmp-map ، نوع ارائه پیش فرض google.maps.RenderingType.VECTOR ، با کنترل شیب و عنوان است.

با نقشه های بردار شروع کنید

شیب و چرخش

شما می توانید با استفاده از خواص heading و tilt هنگام اولیه سازی نقشه ، شیب و چرخش (عنوان) را بر روی نقشه بردار تنظیم کنید و با فراخوانی روشهای setTilt و setHeading روی نقشه. مثال زیر برخی از دکمه ها را به نقشه اضافه می کند که نشان می دهد شیب تنظیم برنامه ای و در افزایش 20 درجه.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: {
        lat: 37.7893719,
        lng: -122.3942,
      },
      zoom: 16,
      heading: 320,
      tilt: 47.5,
      mapId: "90f87356969d889c",
    }
  );

  const buttons: [string, string, number, google.maps.ControlPosition][] = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode: string, amount: number) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt()! + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading()! + amount);
        break;
      default:
        break;
    }
  };
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7893719,
      lng: -122.3942,
    },
    zoom: 16,
    heading: 320,
    tilt: 47.5,
    mapId: "90f87356969d889c",
  });
  const buttons = [
    ["Rotate Left", "rotate", 20, google.maps.ControlPosition.LEFT_CENTER],
    ["Rotate Right", "rotate", -20, google.maps.ControlPosition.RIGHT_CENTER],
    ["Tilt Down", "tilt", 20, google.maps.ControlPosition.TOP_CENTER],
    ["Tilt Up", "tilt", -20, google.maps.ControlPosition.BOTTOM_CENTER],
  ];

  buttons.forEach(([text, mode, amount, position]) => {
    const controlDiv = document.createElement("div");
    const controlUI = document.createElement("button");

    controlUI.classList.add("ui-button");
    controlUI.innerText = `${text}`;
    controlUI.addEventListener("click", () => {
      adjustMap(mode, amount);
    });
    controlDiv.appendChild(controlUI);
    map.controls[position].push(controlDiv);
  });

  const adjustMap = function (mode, amount) {
    switch (mode) {
      case "tilt":
        map.setTilt(map.getTilt() + amount);
        break;
      case "rotate":
        map.setHeading(map.getHeading() + amount);
        break;
      default:
        break;
    }
  };
}

window.initMap = initMap;
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.ui-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 400 18px Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
.ui-button:hover {
  background: rgb(235, 235, 235);
}
style.css

<html>
  <head>
    <title>Tilt and Rotation</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

از حرکات ماوس و صفحه کلید استفاده کنید

اگر تعامل کاربر شیب و چرخش (عنوان) فعال شده باشد (یا از نظر برنامه ای یا در کنسول Google Cloud) ، پس کاربران می توانند شیب و چرخش را با استفاده از ماوس و صفحه کلید تنظیم کنند:

• با استفاده از ماوس ، کلید Shift را نگه دارید ، سپس ماوس را به سمت بالا و پایین بکشید تا شیب ، راست و چپ را تنظیم کنید تا عنوان تنظیم شود.
• با استفاده از صفحه کلید ، کلید Shift را نگه دارید ، سپس از کلیدهای پیکان بالا و پایین برای تنظیم شیب و کلیدهای فلش راست و چپ برای تنظیم عنوان استفاده کنید.

برنامه نویسی شیب و عنوان را تنظیم کنید

از روشهای setTilt() و setHeading() استفاده کنید تا به صورت برنامه ای شیب و هدایت روی نقشه بردار را تنظیم کنید. عنوان مسیری است که دوربین در درجه های عقربه های ساعت از شمال شروع می شود ، بنابراین map.setHeading(90) . زاویه شیب از Zenith اندازه گیری می شود ، بنابراین map.setTilt(0) مستقیم به پایین نگاه می کند ، در حالی که map.setTilt(45) به یک نمای مورب منجر می شود.

• برای تنظیم زاویه شیب نقشه ، setTilt() تماس بگیرید. برای به دست آوردن مقدار شیب فعلی getTilt() استفاده کنید.
• برای تنظیم عنوان نقشه setHeading() تماس بگیرید. برای به دست آوردن مقدار عنوان فعلی getHeading() استفاده کنید.

برای تغییر مرکز نقشه ضمن حفظ شیب و عنوان ، از map.setCenter() یا map.panBy() استفاده کنید.

توجه داشته باشید که دامنه زاویه هایی که می توانند مورد استفاده قرار گیرند با سطح بزرگنمایی فعلی متفاوت است. مقادیر خارج از این محدوده به محدوده مجاز در حال حاضر چسبانده می شود.

همچنین می توانید از روش moveCamera برای تغییر برنامه ای عنوان ، شیب ، مرکز و زوم استفاده کنید. بیشتر بدانید .

تأثیر بر روشهای دیگر

هنگامی که شیب یا چرخش به نقشه اعمال می شود ، رفتار سایر نقشه های API JavaScript تحت تأثیر قرار می گیرد:

• map.getBounds() همیشه کوچکترین جعبه محدودیتی را که شامل منطقه قابل مشاهده است ، برمی گرداند. هنگامی که شیب اعمال می شود ، مرزهای برگشتی ممکن است منطقه ای بزرگتر از منطقه قابل مشاهده نمای نقشه را نشان دهند.
• map.fitBounds() قبل از قرار دادن مرزها ، شیب را مجدداً تنظیم می کند و به صفر می رسد.
• map.panToBounds() قبل از اینکه مرزها را بپیچانید ، شیب را تنظیم می کند و به صفر می رسد.
• map.setTilt() هر مقدار را می پذیرد ، اما حداکثر شیب را بر اساس سطح بزرگنمایی نقشه فعلی محدود می کند.
• map.setHeading() هر مقدار را می پذیرد ، و آن را تغییر می دهد تا در محدوده قرار بگیرد [0 ، 360].

دوربین را کنترل کنید

برای به روزرسانی هر ترکیبی از خصوصیات دوربین به طور همزمان از عملکرد map.moveCamera() استفاده کنید. map.moveCamera() یک پارامتر واحد را که شامل تمام خصوصیات دوربین برای به روزرسانی است ، می پذیرد. مثال زیر با map.moveCamera() تماس می گیرد تا center ، zoom ، heading و tilt به یکباره تنظیم کند:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

همانطور که در اینجا نشان داده شده است ، می توانید ویژگی های دوربین را با فراخوانی map.moveCamera() با یک حلقه انیمیشن تحریک کنید:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

موقعیت دوربین

نمای نقشه به عنوان دوربینی که در یک هواپیمای مسطح به پایین نگاه می کند مدل می شود. موقعیت دوربین (و از این رو ارائه نقشه) توسط خواص زیر مشخص شده است: هدف (محل عرض جغرافیایی/طول جغرافیایی) ، بلبرینگ ، شیب و زوم .

هدف (مکان)

هدف دوربین محل مرکز نقشه است که به عنوان مختصات عرض جغرافیایی و طول جغرافیایی مشخص شده است.

تحمل (جهت گیری)

تحمل دوربین جهت قطب نما را مشخص می کند ، که در درجه های شمال واقعی اندازه گیری می شود ، مربوط به لبه بالای نقشه است. اگر یک خط عمودی از مرکز نقشه به لبه بالای نقشه بکشید ، یاتاقان با عنوان دوربین (اندازه گیری شده در درجه) نسبت به شمال واقعی مطابقت دارد.

تحمل 0 به این معنی است که بالای نقشه به شمال واقعی اشاره دارد. مقدار بلبرینگ 90 به معنای بالای نقاط نقشه به شرق (90 درجه روی قطب نما) است. مقدار 180 به معنای بالای نقاط نقشه به جنوب است.

API MAPS به شما امکان می دهد یاتاقان نقشه را تغییر دهید. به عنوان مثال ، شخصی که در حال رانندگی یک ماشین است ، اغلب نقشه راه را می چرخاند تا آن را با جهت سفر خود تراز کند ، در حالی که کوهنوردان با استفاده از نقشه و قطب نما معمولاً نقشه را هدایت می کنند تا یک خط عمودی به سمت شمال حرکت کند.

شیب (زاویه مشاهده)

شیب موقعیت دوربین را بر روی یک قوس مستقیماً بر روی موقعیت مرکز نقشه تعریف می کند ، که در درجه ای از نادر اندازه گیری می شود (جهت که مستقیماً به زیر دوربین نشان می دهد). مقدار 0 مربوط به دوربین است که مستقیماً به پایین نشان داده شده است. مقادیر بیشتر از 0 مطابق با دوربین است که توسط تعداد مشخص شده درجه به سمت افق قرار می گیرد. هنگامی که زاویه مشاهده را تغییر می دهید ، نقشه در چشم انداز ظاهر می شود ، با ویژگی های دور از دسترس کوچکتر به نظر می رسد و ویژگی های اطراف آن بزرگتر به نظر می رسد. تصاویر زیر این را نشان می دهد.

در تصاویر زیر ، زاویه مشاهده 0 درجه است. تصویر اول شماتیک از این را نشان می دهد. موقعیت 1 موقعیت دوربین است و موقعیت 2 موقعیت نقشه فعلی است. نقشه حاصل در زیر آن نشان داده شده است.

در تصاویر زیر ، زاویه مشاهده 45 درجه است. توجه کنید که دوربین در امتداد یک قوس بین بالای سر مستقیم (0 درجه) و زمین (90 درجه) حرکت می کند تا به موقعیت 3 برسد. این دوربین هنوز به نقطه مرکز نقشه اشاره دارد ، اما منطقه ای که توسط خط در موقعیت 4 نشان داده شده است اکنون قابل مشاهده است.

نقشه موجود در این تصویر هنوز در همان نقطه ای از نقشه اصلی متمرکز است ، اما ویژگی های بیشتری در بالای نقشه ظاهر شده است. با افزایش زاویه فراتر از 45 درجه ، ویژگی های بین دوربین و موقعیت نقشه نسبتاً بزرگتر به نظر می رسند ، در حالی که ویژگی های فراتر از موقعیت نقشه نسبتاً کوچکتر به نظر می رسد و یک اثر سه بعدی به همراه دارد.

بزرگنمایی ضربه بزنید؛

سطح بزرگنمایی دوربین مقیاس نقشه را تعیین می کند. در سطح بزرگنمایی بزرگتر جزئیات بیشتری را می توان در صفحه مشاهده کرد ، در حالی که در سطح بزرگنمایی کوچکتر بیشتر جهان را می توان در صفحه مشاهده کرد.

سطح بزرگنمایی نیازی به یک عدد صحیح نیست. دامنه سطح بزرگنمایی مجاز توسط نقشه به تعدادی از عوامل از جمله هدف ، نوع نقشه و اندازه صفحه بستگی دارد. هر عدد خارج از محدوده به نزدیکترین مقدار معتبر بعدی تبدیل می شود ، که می تواند حداقل سطح زوم یا حداکثر سطح زوم باشد. لیست زیر سطح تقریبی جزئیات را که می توانید در هر سطح زوم مشاهده کنید نشان می دهد:

• 1: جهان
• 5: ماسه زمین/قاره
• 10: شهر
• 15: خیابان ها
• 20: ساختمانها

بزرگنمایی

نقشه های بردار از بزرگنمایی کسری پشتیبانی می کنند ، که به شما امکان می دهد با استفاده از مقادیر کسری به جای عدد صحیح ، زوم کنید. در حالی که هر دو نقشه شطرنجی و بردار از بزرگنمایی کسری پشتیبانی می کنند ، بزرگنمایی کسری به طور پیش فرض برای نقشه های بردار روشن است و به طور پیش فرض برای نقشه های شطرنجی خاموش است. برای روشن و خاموش کردن بزرگنمایی کسری ، از گزینه نقشه isFractionalZoomEnabled استفاده کنید.

مثال زیر نشان می دهد بزرگنمایی کسری هنگام شروع نقشه:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

همچنین می توانید با تنظیم گزینه نقشه isFractionalZoomEnabled همانطور که در اینجا نشان داده شده است ، بزرگنمایی کسری را روشن و خاموش کنید:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

شما می توانید یک شنونده را تنظیم کنید تا تشخیص دهد که آیا بزرگنمایی کسری روشن است. این امر مفید است اگر شما صریحاً isFractionalZoomEnabled به true یا false تنظیم نکرده باشید. کد مثال زیر بررسی می کند که آیا بزرگنمایی کسری فعال شده است:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});