إمالة وتدوير

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

    <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، ثم استخدِم مفاتيح السهمَين المتّجهَين للأعلى وللأسفل لضبط الميل، ومفاتيح السهمَين المتّجهَين لليسار ولليمين لضبط heading.

تعديل الإمالة والعنوان آليًا

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

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

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

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

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

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

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

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