عناصر الخريطة الاتجاهية

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

عرض العيّنة

تقدّم واجهة برمجة التطبيقات Maps JavaScript API طريقتَين مختلفتَين لتنفيذ الخريطة: Raster وVector. تحمِّل الخريطة المخصّصة للأجهزة الجوّالة الخريطة كشبكة من وحدات تشكل صورة مخصّصة للأجهزة الجوّالة تستند إلى وحدات البكسل، والتي يتم إنشاؤها من جانب خادم "منصّة خرائط Google"، ثم يتم عرضها على تطبيق الويب. تتألّف الخريطة المستندة إلى المتجهات من وحدات تشكل صورة مستنِدة إلى المتجهات، والتي يتم رسمها في وقت التحميل من جانب العميل باستخدام WebGL، وهي تكنولوجيا ويب تسمح للمتصفّح بالوصول إلى وحدة معالجة الرسومات على جهاز المستخدم لعرض الرسومات ثنائية وثلاثية الأبعاد.

الخريطة المستندة إلى الأشكال الهندسية هي خريطة Google نفسها التي اعتاد المستخدمون استخدامها، وتوفر عددًا من المزايا مقارنةً بخريطة الشبكة المعروضة بالطريقة المخصّصة التلقائية، ومن أبرزها حدة الصور المستندة إلى الأشكال الهندسية، وإضافة المباني الثلاثية الأبعاد عند مستويات التكبير/التصغير القريبة. تتيح الخريطة المتجهّة الميزات التالية:

• التحكّم الآلي في الإمالة والعنوان
• عناصر التحكّم المحسّنة في الكاميرا
• التكبير/التصغير الكسري لإجراء عملية تكبير/تصغير أكثر سلاسة

• المحتوى الثلاثي الأبعاد والصور المتحركة

• بالنسبة إلى الخرائط التي يتم تحميلها باستخدام عنصر 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 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].

التحكّم في الكاميرا

استخدِم الدالة 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 درجة. يُرجى ملاحظة أنّ الكاميراMOVED تتحرك في منتصف قوس بين الاتجاه العلوي المباشر (0 درجة) والأرض (90 درجة)،MOVED إلى الموضع 3. لا تزال الكاميرا مصوّبة نحو نقطة مركز الخريطة، ولكن أصبحت المنطقة الممثّلة بالخط في الموضع 4 مرئية الآن.

لا تزال الخريطة في لقطة الشاشة هذه مركّزة على النقطة نفسها كما في الخرائط الأصلية، ولكن ظهرت المزيد من العناصر في أعلى الخريطة. عند زيادة الزاوية عن 45 درجة، تظهر العناصر بين الكاميرا وموضع التضاريس على التضاريس أكبر بشكلٍ نسبي، بينما تظهر العناصر التي تتجاوز موضع التضاريس أصغر بشكلٍ نسبي، ما ينتج عنه تأثير ثلاثي الأبعاد.

Zoom

يحدّد مستوى تكبير الكاميرا مقياس الخريطة. عند استخدام مستويات التكبير الأكبر، يمكن رؤية المزيد من التفاصيل على الشاشة، بينما عند استخدام مستويات التكبير الأصغر، يمكن رؤية المزيد من العالم على الشاشة.

ولا يلزم أن يكون مستوى التكبير أو التصغير عددًا صحيحًا. يعتمد نطاق مستويات التكبير/التصغير المسموح بها في الخريطة على عدد من العوامل، بما في ذلك الهدف ونوع الخريطة وحجم الشاشة. سيتم تحويل أي رقم خارج النطاق إلى أقرب قيمة صالحة تالية، والتي يمكن أن تكون إما الحد الأدنى لمستوى التكبير أو الحد الأقصى لمستوى التكبير. تعرض القائمة التالية المستوى التقريبي للتفاصيل التي يمكنك توقع رؤيتها في كل مستوى تكبير:

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