إمالة وتدوير

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

اختيار نظام أساسي: 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

JavaScript

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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>
index.html

تجربة النموذج

استخدام إيماءات الماوس ولوحة المفاتيح

يمكنك ضبط الإمالة والتدوير باستخدام الماوس ولوحة المفاتيح:

  • باستخدام الماوس، اضغط مع الاستمرار على مفتاح shift، ثم انقر واسحب الماوس لأعلى ولتعديل الإمالة، لليمين واليسار لضبط العنوان.
  • باستخدام لوحة المفاتيح، اضغط مع الاستمرار على مفتاح shift، ثم استخدم مفتاحي السهمين لأعلى ولأسفل لضبط الإمالة، واستخدم مفتاحي السهمين لليمين ولليسار لتعديل الرأس.

ضبط الإمالة والعنوان آليًا

استخدِم طريقتَي setTilt() وsetHeading() لضبط الإمالة والعناوين آليًا على خريطة متّجهية. الاتجاه هو الاتجاه المقابل للكاميرا في اتجاه عقارب الساعة بدءًا من الشمال، ولذلك سيدير map.setHeading(90) الخريطة باتجاه الشرق نحو الأعلى. يتم قياس زاوية الإمالة من السمتّ، لذلك تنظر map.setTilt(0) مباشرةً إلى الأسفل، بينما ينتج عن map.setTilt(45) عرض مائل.

  • اتصل بـ setTilt() لتعيين زاوية الإمالة للخريطة. استخدم getTilt() للحصول على قيمة الإمالة الحالية.
  • اتصل بـ setHeading() لتعيين عنوان الخريطة. استخدم getHeading() للحصول على قيمة العنوان الحالية.

لتغيير مركز الخريطة مع الحفاظ على الإمالة والاتجاه، استخدم map.setCenter() أو map.panBy().

لاحظ أن نطاق الزوايا التي يمكن استخدامها يختلف باختلاف مستوى التكبير/التصغير الحالي. سيتم تقريب القيم خارج هذا النطاق إلى النطاق المسموح به حاليًا.

يمكنك أيضًا استخدام طريقة moveCamera لتغيير العنوان والإمالة والوسط والتكبير/التصغير آليًا. مزيد من المعلومات

التأثير على الطرق الأخرى

عند تطبيق الإمالة أو التدوير على الخريطة، يتأثر سلوك طرق واجهة برمجة تطبيقات JavaScript للخرائط الأخرى:

  • تعرض map.getBounds() دائمًا أصغر مربع حد يتضمن المنطقة المرئية؛ وعند تطبيق الإمالة، قد تمثل الحدود المعروضة منطقة أكبر من المنطقة المرئية من إطار عرض الخريطة.
  • سيعيد map.fitBounds() تعيين الإمالة ويتجه إلى الصفر قبل ضبط الحدود.
  • سيعيد map.panToBounds() تعيين الإمالة ويتجه إلى الصفر قبل تحريك الحدود.
  • تقبل map.setTilt() أي قيمة، ولكنها تقيد الإمالة القصوى استنادًا إلى مستوى التكبير/التصغير الحالي في الخريطة.
  • تقبل map.setHeading() أي قيمة، وتُعدِّلها لتلائم النطاق [0، 360].