إمالة وتدوير

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

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

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;

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);
}

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>

جرّب عيّنة

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

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

  • باستخدام الماوس، اضغط مع الاستمرار على مفتاح 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].