Places UI Kit : یک کتابخانه آماده برای استفاده که فضایی را برای سفارشی‌سازی و توسعه کم کد فراهم می‌کند. آن را امتحان کنید و نظرات خود را در مورد تجربه کیت UI خود به اشتراک بگذارید.

‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

ویژگی‌های نقشه بُرداری

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

مشاهده نمونه

‫Maps JavaScript API دو پیاده‌سازی متفاوت از نقشه ارائه می‌دهد: شطرنجی و بُرداری. نقشه شطرنجی نقشه را به‌صورت شبکه‌ای از کاشی‌های تصویر شطرنجی مبتنی بر پیکسل بار می‌کند که توسط سمت سرور «پلاتفرم Google Maps» تولید می‌شوند و سپس به برنامه وب شما ارائه می‌شوند. نقشه بُرداری از کاشی‌های مبتنی بر بُردار تشکیل شده است که در زمان بارگیری در سمت کارخواه بااستفاده از WebGL ترسیم می‌شوند. WebGL فناوری وبی است که به مرورگر اجازه می‌دهد برای ارائه گرافیک‌های دوبعدی و سه‌بعدی به GPU در دستگاه کاربر دسترسی داشته باشد.

نقشه بُرداری همان نقشه Google است که کاربران شما با آن آشنا هستند و مزایای متعددی نسبت‌به نقشه کاشی شطرنجی پیش‌فرض دارد، به‌ویژه وضوح تصاویر مبتنی بر بُردار و افزودن ساختمان‌های سه‌بعدی در سطوح بزرگ‌نمایی نزدیک. نقشه بُرداری از این ویژگی‌ها پشتیبانی می‌کند:

کنترل برنامه‌ای شیب و جهت
کنترل دوربین بهبودیافته
بزرگ‌نمایی کسری برای بزرگ‌نمایی روان‌تر
محتوا و پویانمایی‌های سه‌بعدی
برای نقشه‌های بارشده بااستفاده از عنصر div و جاوا اسکریپت، نوع پیش‌پرداز پیش‌فرض google.maps.RenderingType.RASTER است.
برای نقشه‌های بارشده بااستفاده از عنصر gmp-map، نوع پیش‌فرض ارائه google.maps.RenderingType.VECTOR است و کنترل کج کردن و جهت فعال است.

شروع به کار با «نقشه‌های بُرداری»

کج کردن و چرخاندن

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

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 را نگه دارید، سپس از کلیدهای بالابر و پایین‌بر برای تنظیم شیب و از کلیدهای راست‌بر و چپ‌بر برای تنظیم جهت استفاده کنید.

تنظیم برنامه‌نویسی‌شده شیب و جهت

از روش‌های setTilt() و setHeading() برای تنظیم برنامه‌نویسی‌شده شیب و جهت در نقشه بُرداری استفاده کنید. جهت، جهتی است که دوربین در درجه‌های ساعت‌گرد از شمال به آن نگاه می‌کند، بنابراین map.setHeading(90) نقشه را می‌چرخاند تا شرق رو به بالا باشد. زاویه کج شدن از سمت‌الرأس اندازه‌گیری می‌شود، بنابراین map.setTilt(0) مستقیماً به پایین نگاه می‌کند، درحالی‌که map.setTilt(45) منجر به نمای مایل می‌شود.

برای تنظیم زاویه شیب نقشه، setTilt() را فراخوانی کنید. از getTilt() برای دریافت مقدار شیب فعلی استفاده کنید.
برای تنظیم جهت نقشه، setHeading() را فراخوانی کنید. از getHeading() برای دریافت مقدار عنوان فعلی استفاده کنید.

برای تغییر مرکز نقشه با حفظ شیب و جهت، از map.setCenter() یا map.panBy() استفاده کنید.

توجه داشته باشید که محدوده زاویه‌هایی که می‌توان استفاده کرد بسته به سطح بزرگ‌نمایی فعلی متفاوت است. مقادیر خارج از این محدوده به محدوده مجاز محدود می‌شوند.

همچنین می‌توانید از روش moveCamera برای تغییر برنامه‌نویسی‌شده جهت، شیب، مرکز، و بزرگ‌نمایی استفاده کنید. بیشتر بدانید.

تأثیر بر روش‌های دیگر

وقتی کج کردن یا چرخش روی نقشه اعمال می‌شود، رفتار دیگر روش‌های Maps JavaScript API تحت‌تأثیر قرار می‌گیرد:

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

موقعیت دوربین

نمای نقشه به‌عنوان دوربینی مدل‌سازی شده است که به صفحه‌ای تخت نگاه می‌کند. موقعیت دوربین (و درنتیجه رندر کردن نقشه) با ویژگی‌های زیر مشخص می‌شود: هدف (مکان عرض جغرافیایی/طول جغرافیایی)، زاویه، شیب، و بزرگ‌نمایی.

هدف (مکان)

نشان‌گاه دوربین مکان مرکز نقشه است که به‌صورت مختصات طول و عرض جغرافیایی مشخص می‌شود.

عرض جغرافیایی می‌تواند بین ۸۵- و ۸۵ درجه باشد. مقادیر بالاتر یا پایین‌تر از این محدوده به نزدیک‌ترین مقدار در این محدوده محدود خواهند شد. برای مثال، اگر عرض جغرافیایی را ۱۰۰ مشخص کنید، مقدار آن روی ۸۵ تنظیم می‌شود. طول جغرافیایی بین ۱۸۰- و ۱۸۰ درجه است. مقادیر بالاتر یا پایین‌تر از این محدوده به‌گونه‌ای پیچیده می‌شوند که در محدوده (۱۸۰-، ۱۸۰) قرار گیرند. برای مثال، ۴۸۰، ۸۴۰، و ۱۲۰۰ همگی به ۱۲۰ درجه تبدیل می‌شوند.

جهت (جهت‌یابی)

جهت دوربین، جهت قطب‌نما را مشخص می‌کند که برحسب درجه از شمال واقعی اندازه‌گیری می‌شود و با لبه بالایی نقشه مطابقت دارد. اگر خطی عمودی از مرکز نقشه به لبه بالایی نقشه بکشید، جهت با عنوان دوربین (اندازه‌گیری‌شده به درجه) نسبت به شمال واقعی مطابقت دارد.

جهت ۰ یعنی بالای نقشه به‌سمت شمال واقعی است. مقدار جهت ۹۰ یعنی بالای نقشه به‌سمت شرق است (۹۰ درجه روی قطب‌نما). مقدار ۱۸۰ یعنی بالای نقشه به‌سمت جنوب است.

Maps API به شما امکان می‌دهد جهت نقشه را تغییر دهید. برای مثال، کسی که رانندگی می‌کند اغلب نقشه راه را می‌چرخاند تا آن را با جهت سفرش هم‌راستا کند، درحالی‌که کوهنوردان بااستفاده از نقشه و قطب‌نما معمولاً نقشه را طوری جهت‌یابی می‌کنند که خط عمودی به سمت شمال باشد.

شیب (زاویه دید)

شیب موقعیت دوربین را روی قوسی مستقیماً بالای موقعیت مرکز نقشه تعریف می‌کند که برحسب درجه از نظیر (جهتی که مستقیماً زیر دوربین را نشان می‌دهد) اندازه‌گیری می‌شود. مقدار ۰ مربوط به دوربینی است که مستقیماً به‌سمت پایین گرفته شده است. مقادیر بزرگ‌تر از ۰ مربوط به دوربینی است که به‌اندازه تعداد درجه مشخص‌شده به‌سمت افق زاویه دارد. وقتی زاویه دید را تغییر می‌دهید، نقشه به‌صورت پرسپکتیو نمایش داده می‌شود و عارضه‌های دورتر کوچک‌تر و عارضه‌های نزدیک‌تر بزرگ‌تر نشان داده می‌شوند. تصویرهای زیر این موضوع را نشان می‌دهد.

در تصاویر زیر، زاویه دید ۰ درجه است. تصویر اول طرح‌واره‌ای از این موضوع را نشان می‌دهد؛ موقعیت ۱ موقعیت دوربین است و موقعیت ۲ موقعیت فعلی نقشه است. نقشه حاصل در زیر آن نشان داده می‌شود.

نماگرفت نقشه‌ای با دوربینی که در زاویه دید ۰ درجه و سطح بزرگ‌نمایی ۱۸ قرار دارد. — نقشه با زاویه دید پیش‌فرض دوربین نمایش داده می‌شود.

نموداری که موقعیت پیش‌فرض دوربین را مستقیماً روی موقعیت نقشه با زاویه ۰ درجه نشان می‌دهد. — زاویه دید پیش‌فرض دوربین.

در تصاویر زیر، زاویه دید ۴۵ درجه است. توجه کنید که دوربین تا نیمه در امتداد قوسی بین بالای سر (۰ درجه) و زمین (۹۰ درجه) حرکت می‌کند تا به موقعیت ۳ برسد. دوربین همچنان به‌سمت نقطه مرکزی نقشه است، اما منطقه‌ای که با خط در موقعیت ۴ نشان داده شده است اکنون قابل‌مشاهده است.

نماگرفتی از نقشه با دوربینی که در زاویه دید ۴۵ درجه و سطح بزرگ‌نمایی ۱۸ قرار دارد. — نقشه با زاویه دید ۴۵ درجه نمایش داده می‌شود.

نقشه در این نماگرفت همچنان روی همان نقطه نقشه اصلی متمرکز است، اما ویژگی‌های بیشتری در بالای نقشه ظاهر شده است. با افزایش زاویه به بیش از ۴۵ درجه، عوارض بین دوربین و موقعیت نقشه به‌طور متناسب بزرگ‌تر ظاهر می‌شوند، درحالی‌که عوارض فراتر از موقعیت نقشه به‌طور متناسب کوچک‌تر ظاهر می‌شوند و جلوه‌ای سه‌بعدی ایجاد می‌کنند.

بزرگ‌نمایی

سطح بزرگ‌نمایی دوربین مقیاس نقشه را تعیین می‌کند. در سطوح بزرگ‌نمایی بیشتر، جزئیات بیشتری در صفحه دیده می‌شود، درحالی‌که در سطوح بزرگ‌نمایی کمتر، بخش بیشتری از جهان در صفحه دیده می‌شود.

سطح بزرگ‌نمایی لزوماً نباید عدد صحیح باشد. محدوده سطوح بزرگ‌نمایی مجاز در نقشه به عوامل متعددی ازجمله هدف، نوع نقشه، و اندازه صفحه‌نمایش بستگی دارد. هر عددی خارج از این محدوده به نزدیک‌ترین مقدار معتبر بعدی تبدیل می‌شود که می‌تواند حداقل سطح بزرگ‌نمایی یا حداکثر سطح بزرگ‌نمایی باشد. فهرست زیر سطح تقریبی جزئیاتی را نشان می‌دهد که می‌توانید انتظار داشته باشید در هر سطح بزرگ‌نمایی ببینید:

‫۱: جهان
۵: خشکی/قاره
‫۱۰: شهر
‫۱۵: خیابان‌ها
‫۲۰: ساختمان‌ها

تصاویر زیر ظاهر بصری سطوح بزرگ‌نمایی مختلف را نشان می‌دهد:

نماگرفت نقشه در سطح بزرگ‌نمایی ۵ — نقشه‌ای در سطح بزرگ‌نمایی ۵.

نماگرفت از نقشه در سطح بزرگ‌نمایی ۱۵ — نقشه‌ای با سطح بزرگ‌نمایی ۱۵.

نماگرفت نقشه در سطح بزرگ‌نمایی ۲۰ — نقشه‌ای با سطح بزرگ‌نمایی ۲۰.

بزرگ‌نمایی کسری

نقشه‌های بُرداری از بزرگ‌نمایی کسری پشتیبانی می‌کنند که به شما امکان می‌دهد بااستفاده از مقادیر کسری به‌جای اعداد صحیح بزرگ‌نمایی کنید. درحالی‌که هر دو نقشه شطرنجی و بُرداری از بزرگ‌نمایی کسری پشتیبانی می‌کنند، بزرگ‌نمایی کسری به‌طور پیش‌فرض برای نقشه‌های بُرداری روشن و برای نقشه‌های شطرنجی خاموش است. از گزینه نقشه 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');
  }
});