شیب و چرخش

پلتفرم را انتخاب کنید: Android iOS JavaScript

مشاهده نمونه

بررسی اجمالی

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

TypeScript

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

CSS

/* 
 * 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

<html>
  <head>
    <title>Tilt and Rotation</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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 callback 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

Sample را امتحان کنید

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

اگر تعامل کاربر شیب و چرخش (عنوان) فعال شده باشد (به صورت برنامه‌ریزی یا در 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] قرار گیرد.