نمای کلی کنترل ها
نقشههایی که از طریق Maps JavaScript API نمایش داده میشوند حاوی عناصر UI هستند تا امکان تعامل کاربر با نقشه را فراهم کنند. این عناصر به عنوان کنترل شناخته می شوند و می توانید تغییراتی از این کنترل ها را در برنامه خود قرار دهید. از طرف دیگر، نمیتوانید کاری انجام دهید و اجازه دهید Maps JavaScript API تمام رفتارهای کنترلی را مدیریت کند.
نقشه زیر مجموعه پیش فرض کنترل های نمایش داده شده توسط Maps JavaScript API را نشان می دهد:
در زیر لیستی از مجموعه کامل کنترلهایی که میتوانید در نقشههای خود استفاده کنید آمده است:
- کنترل زوم دکمه های "+" و "-" را برای تغییر سطح بزرگنمایی نقشه نمایش می دهد. این کنترل به طور پیش فرض در گوشه سمت راست پایین نقشه ظاهر می شود.
- کنترل دوربین دارای هر دو کنترل بزرگنمایی و حرکت می باشد و در هنگام استفاده از کانال بتا به طور پیش فرض به جای کنترل زوم نمایش داده می شود.
- کنترل Map Type به سبک نوار دکمه کشویی یا افقی موجود است و به کاربر امکان می دهد نوع نقشه (
ROADMAP
،SATELLITE
،HYBRID
، یاTERRAIN
) را انتخاب کند. این کنترل به طور پیش فرض در گوشه سمت چپ بالای نقشه ظاهر می شود. - کنترل نمای خیابان حاوی یک نماد آدمک است که می تواند روی نقشه کشیده شود تا نمای خیابان فعال شود. این کنترل به طور پیش فرض در نزدیکی سمت راست پایین نقشه ظاهر می شود.
- کنترل چرخش ترکیبی از گزینههای شیب و چرخش را برای نقشههای حاوی تصاویر مایل فراهم میکند. این کنترل به طور پیش فرض در نزدیکی سمت راست پایین نقشه ظاهر می شود. برای اطلاعات بیشتر به تصاویر 45 درجه مراجعه کنید.
- کنترل مقیاس یک عنصر مقیاس نقشه را نمایش می دهد. این کنترل به طور پیش فرض غیرفعال است.
- کنترل تمام صفحه گزینه باز کردن نقشه در حالت تمام صفحه را ارائه می دهد. این کنترل به طور پیش فرض در دستگاه های دسکتاپ و موبایل فعال است. توجه: iOS از ویژگی تمام صفحه پشتیبانی نمی کند. بنابراین کنترل تمام صفحه در دستگاه های iOS قابل مشاهده نیست.
- کنترل میانبرهای صفحه کلید فهرستی از میانبرهای صفحه کلید را برای تعامل با نقشه نمایش می دهد.
شما مستقیماً به این کنترلهای نقشه دسترسی ندارید یا آنها را تغییر نمیدهید. در عوض، فیلدهای MapOptions
نقشه را تغییر میدهید که بر روی دید و نمایش کنترلها تأثیر میگذارد. میتوانید نمایش کنترل را پس از نمونهسازی نقشه خود (با MapOptions
مناسب) تنظیم کنید یا با فراخوانی setOptions()
یک نقشه را به صورت پویا تغییر دهید تا گزینههای نقشه را تغییر دهید.
همه این کنترل ها به طور پیش فرض فعال نیستند. برای آشنایی با رفتار رابط کاربری پیشفرض (و نحوه اصلاح چنین رفتاری)، به رابط کاربری پیشفرض در زیر مراجعه کنید.
رابط کاربری پیش فرض
به طور پیش فرض، اگر نقشه خیلی کوچک باشد (200x200 پیکسل) همه کنترل ها ناپدید می شوند. شما می توانید با تنظیم صریح کنترل برای قابل مشاهده بودن این رفتار را لغو کنید. به افزودن کنترل ها به نقشه مراجعه کنید.
رفتار و ظاهر کنترلها در دستگاههای تلفن همراه و رومیزی یکسان است، به جز کنترل تمام صفحه (به رفتار شرح داده شده در لیست کنترلها مراجعه کنید).
علاوه بر این، کنترل صفحه کلید به طور پیش فرض در همه دستگاه ها روشن است.
رابط کاربری پیش فرض را غیرفعال کنید
ممکن است بخواهید دکمه های رابط کاربری پیش فرض API را به طور کامل خاموش کنید. برای انجام این کار، ویژگی disableDefaultUI
نقشه (در شی MapOptions
) را روی true
تنظیم کنید. این ویژگی هر دکمه کنترل رابط کاربری را از Maps JavaScript API غیرفعال می کند. با این حال، حرکات ماوس یا میانبرهای صفحه کلید روی نقشه پایه را که به ترتیب توسط ویژگیهای gestureHandling
و keyboardShortcuts
کنترل میشوند، تحت تأثیر قرار نمیدهد.
کد زیر دکمه های UI را غیرفعال می کند:
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, disableDefaultUI: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
جاوا اسکریپت
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, disableDefaultUI: true, }); } window.initMap = initMap;
Sample را امتحان کنید
کنترل ها را به نقشه اضافه کنید
ممکن است بخواهید رابط خود را با حذف، افزودن یا اصلاح رفتار یا کنترلهای UI تنظیم کنید و اطمینان حاصل کنید که بهروزرسانیهای آینده این رفتار را تغییر نمیدهند. اگر میخواهید فقط رفتار موجود را اضافه یا تغییر دهید، باید اطمینان حاصل کنید که کنترل به صراحت به برنامه شما اضافه شده است.
برخی از کنترلها بهطور پیشفرض روی نقشه ظاهر میشوند در حالی که برخی دیگر ظاهر نمیشوند مگر اینکه شما بهطور خاص آنها را درخواست کنید. افزودن یا حذف کنترلها از نقشه در فیلدهای شی MapOptions
زیر مشخص میشود، که برای قابل مشاهده کردن آنها روی true
یا برای پنهان کردن آنها روی false
تنظیم میکنید:
{ zoomControl: boolean, cameraControl: boolean, mapTypeControl: boolean, scaleControl: boolean, streetViewControl: boolean, rotateControl: boolean, fullscreenControl: boolean }
به طور پیش فرض، اگر نقشه کوچکتر از 200x200 پیکسل باشد، تمام کنترل ها ناپدید می شوند. شما می توانید با تنظیم صریح کنترل برای قابل مشاهده بودن این رفتار را لغو کنید. به عنوان مثال، جدول زیر بر اساس اندازه نقشه و تنظیمات فیلد zoomControl
، نمایان بودن یا نبودن کنترل زوم را نشان می دهد:
اندازه نقشه | zoomControl | قابل مشاهده است؟ |
---|---|---|
هر | false | خیر |
هر | true | بله |
>= 200x200 پیکسل | undefined | بله |
<200x200px | undefined | خیر |
مثال زیر نقشه را طوری تنظیم می کند که کنترل زوم را مخفی کند و کنترل مقیاس را نمایش دهد. توجه داشته باشید که ما صراحتاً رابط کاربری پیشفرض را غیرفعال نمیکنیم، بنابراین این تغییرات به رفتار رابط کاربری پیشفرض افزوده میشوند.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, zoomControl: false, scaleControl: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
جاوا اسکریپت
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, zoomControl: false, scaleControl: true, }); } window.initMap = initMap;
Sample را امتحان کنید
گزینه های کنترل
چندین کنترل قابل تنظیم هستند که به شما امکان می دهند رفتار آنها را تغییر دهید یا ظاهر آنها را تغییر دهید. برای مثال، کنترل Map Type ممکن است به عنوان یک نوار افقی یا یک منوی کشویی ظاهر شود.
این کنترل ها با تغییر فیلدهای گزینه های کنترل مناسب در شی MapOptions
پس از ایجاد نقشه اصلاح می شوند.
به عنوان مثال، گزینه های تغییر کنترل Map Type در قسمت mapTypeControlOptions
نشان داده شده است. کنترل Map Type ممکن است در یکی از گزینه های style
زیر ظاهر شود:
-
google.maps.MapTypeControlStyle.HORIZONTAL_BAR
آرایهای از کنترلها را بهعنوان دکمههایی در یک نوار افقی نمایش میدهد که در Google Maps نشان داده شده است. -
google.maps.MapTypeControlStyle.DROPDOWN_MENU
یک دکمه کنترل را نمایش می دهد که به شما امکان می دهد نوع نقشه را با استفاده از یک منوی کشویی انتخاب کنید. -
google.maps.MapTypeControlStyle.DEFAULT
رفتار پیش فرض را نشان می دهد که به اندازه صفحه بستگی دارد و ممکن است در نسخه های بعدی API تغییر کند.
توجه داشته باشید که اگر هر یک از گزینههای کنترل را تغییر میدهید، باید صراحتاً با تنظیم مقدار MapOptions
مناسب روی true
، کنترل را نیز فعال کنید. به عنوان مثال، برای تنظیم یک کنترل Map Type برای نمایش سبک DROPDOWN_MENU
، از کد زیر در شی MapOptions
استفاده کنید:
... mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } ...
مثال زیر نحوه تغییر موقعیت و سبک پیش فرض کنترل ها را نشان می دهد.
TypeScript
// You can set control options to change the default position or style of many // of the map controls. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: ["roadmap", "terrain"], }, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
جاوا اسکریپت
// You can set control options to change the default position or style of many // of the map controls. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: ["roadmap", "terrain"], }, }); } window.initMap = initMap;
Sample را امتحان کنید
کنترل ها معمولاً پس از ایجاد نقشه پیکربندی می شوند. با این حال، میتوانید با فراخوانی متد setOptions()
Map
، ارائه کنترلها را به صورت پویا تغییر دهید و گزینههای کنترل جدید را به آن ارسال کنید.
تغییر کنترل ها
هنگامی که نقشه خود را از طریق فیلدهای موجود در شی MapOptions
نقشه ایجاد می کنید، ارائه یک کنترل را مشخص می کنید. این فیلدها در زیر مشخص می شوند:
-
zoomControl
کنترل زوم را فعال/غیرفعال می کند. به طور پیش فرض، این کنترل قابل مشاهده است و در نزدیکی سمت راست پایین نقشه ظاهر می شود. فیلدzoomControlOptions
همچنینZoomControlOptions
برای استفاده برای این کنترل مشخص می کند. -
cameraControl
کنترل دوربین را فعال/غیرفعال می کند. این کنترل به طور پیش فرض روی نقشه ها با استفاده از کانال بتا قابل مشاهده است. فیلدcameraControlOptions
علاوه بر این،CameraControlOptions
برای استفاده برای این کنترل مشخص می کند. -
mapTypeControl
کنترل Map Type را فعال/غیرفعال می کند که به کاربر امکان می دهد بین انواع نقشه (مانند نقشه و ماهواره) جابجا شود. به طور پیش فرض، این کنترل قابل مشاهده است و در گوشه سمت چپ بالای نقشه ظاهر می شود. فیلدmapTypeControlOptions
علاوه بر اینMapTypeControlOptions
را برای استفاده برای این کنترل مشخص می کند. -
streetViewControl
کنترل آدمک آدمک را فعال/غیرفعال میکند که به کاربر امکان میدهد پانورامای نمای خیابان را فعال کند. به طور پیش فرض، این کنترل قابل مشاهده است و در نزدیکی سمت راست پایین نقشه ظاهر می شود. فیلدstreetViewControlOptions
علاوه بر این،StreetViewControlOptions
را برای استفاده برای این کنترل مشخص می کند. -
rotateControl
ظاهر یک کنترل چرخش را برای کنترل جهت تصاویر 45 درجه فعال/غیرفعال می کند. به طور پیش فرض، حضور کنترل با وجود یا عدم وجود تصاویر 45 درجه برای نوع نقشه داده شده در بزرگنمایی و مکان فعلی تعیین می شود. میتوانید رفتار کنترل را با تنظیمrotateControlOptions
نقشه برای تعیینRotateControlOptions
برای استفاده تغییر دهید. اگر تصویر 45 درجه در دسترس نباشد، نمی توانید کنترل را ظاهر کنید. -
scaleControl
کنترل مقیاس را که مقیاس نقشه را ارائه می دهد، فعال/غیرفعال می کند. به طور پیش فرض، این کنترل قابل مشاهده نیست. وقتی فعال باشد، همیشه در گوشه سمت راست پایین نقشه ظاهر می شود.scaleControlOptions
علاوه بر اینScaleControlOptions
را برای استفاده برای این کنترل مشخص می کند. -
fullscreenControl
کنترلی را که نقشه را در حالت تمام صفحه باز می کند فعال/غیرفعال می کند. به طور پیش فرض، این کنترل به طور پیش فرض در دستگاه های دسکتاپ و اندروید فعال است. هنگامی که فعال است، کنترل در سمت راست بالای نقشه ظاهر می شود.fullscreenControlOptions
علاوه بر اینFullscreenControlOptions
را برای استفاده برای این کنترل مشخص می کند.
توجه داشته باشید که میتوانید گزینههایی را برای کنترلهایی که در ابتدا غیرفعال میکنید، مشخص کنید.
کنترل موقعیت
اکثر گزینه های کنترل حاوی یک ویژگی position
(از نوع ControlPosition
) هستند که نشان می دهد در کجای نقشه باید کنترل قرار گیرد. مکان یابی این کنترل ها مطلق نیست. در عوض، API کنترلها را بهطور هوشمندانه با جریان دادن آنها در اطراف عناصر نقشه موجود یا سایر کنترلها، در محدودیتهای داده شده (مانند اندازه نقشه) قرار میدهد.
توجه : هیچ تضمینی وجود ندارد که کنترلها ممکن است با توجه به طرحبندیهای پیچیده همپوشانی نداشته باشند، اگرچه API سعی میکند آنها را هوشمندانه ترتیب دهد.
موقعیت های کنترل زیر پشتیبانی می شوند:
-
TOP_CENTER
نشان می دهد که کنترل باید در امتداد مرکز بالای نقشه قرار گیرد. -
TOP_LEFT
نشان می دهد که کنترل باید در امتداد سمت چپ بالای نقشه قرار گیرد و هر عنصر فرعی کنترل به سمت مرکز بالا جریان داشته باشد. -
TOP_RIGHT
نشان می دهد که کنترل باید در امتداد سمت راست بالای نقشه قرار گیرد و هر عنصر فرعی کنترل به سمت مرکز بالا جریان داشته باشد. -
LEFT_TOP
نشان میدهد که کنترل باید در سمت چپ بالای نقشه، اما در زیر هر عنصرTOP_LEFT
قرار گیرد. -
RIGHT_TOP
نشان میدهد که کنترل باید در سمت راست بالای نقشه، اما در زیر هر عنصرTOP_RIGHT
قرار گیرد. -
LEFT_CENTER
نشان می دهد که کنترل باید در امتداد سمت چپ نقشه، در مرکز بین موقعیت هایTOP_LEFT
وBOTTOM_LEFT
قرار گیرد. -
RIGHT_CENTER
نشان میدهد که کنترل باید در سمت راست نقشه، در مرکز بین موقعیتهایTOP_RIGHT
وBOTTOM_RIGHT
قرار گیرد. -
LEFT_BOTTOM
نشان می دهد که کنترل باید در امتداد پایین سمت چپ نقشه، اما بالای هر عنصرBOTTOM_LEFT
قرار گیرد. -
RIGHT_BOTTOM
نشان میدهد که کنترل باید در سمت راست پایین نقشه، اما بالای هر عنصرBOTTOM_RIGHT
قرار گیرد. -
BOTTOM_CENTER
نشان می دهد که کنترل باید در امتداد مرکز پایین نقشه قرار گیرد. -
BOTTOM_LEFT
نشان میدهد که کنترل باید در امتداد پایین سمت چپ نقشه قرار گیرد، و هر عنصر فرعی کنترل به سمت مرکز پایین جریان داشته باشد. -
BOTTOM_RIGHT
نشان می دهد که کنترل باید در امتداد سمت راست پایین نقشه قرار گیرد و هر عنصر فرعی کنترل به سمت مرکز پایین "جریان" باشد.
توجه داشته باشید که این موقعیتها ممکن است با موقعیتهای عناصر UI که ممکن است مکانهای آنها را تغییر ندهید (مانند حق نسخهبرداری و نشانواره Google) مطابقت داشته باشد. در این موارد، کنترلها بر اساس منطق ذکر شده برای هر موقعیت جریان مییابند و تا حد امکان نزدیک به موقعیت مشخص شده خود ظاهر میشوند.
مثال زیر یک نقشه ساده را با تمام کنترل ها در موقعیت های مختلف نشان می دهد.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 12, center: { lat: -28.643387, lng: 153.612224 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER, }, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER, }, scaleControl: true, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP, }, fullscreenControl: true, } ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
جاوا اسکریپت
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: -28.643387, lng: 153.612224 }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_CENTER, }, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER, }, scaleControl: true, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP, }, fullscreenControl: true, }); } window.initMap = initMap;
Sample را امتحان کنید
کنترل های سفارشی
علاوه بر تغییر سبک و موقعیت کنترلهای API موجود، میتوانید کنترلهای خود را برای مدیریت تعامل با کاربر ایجاد کنید. کنترلها ویجتهای ثابتی هستند که بر روی نقشه در موقعیتهای مطلق شناور میشوند، برخلاف پوششهایی که با نقشه زیرین حرکت میکنند. اساساً، یک کنترل یک عنصر <div>
است که یک موقعیت مطلق بر روی نقشه دارد، مقداری رابط کاربری را به کاربر نمایش میدهد و تعامل با کاربر یا نقشه را معمولاً از طریق یک کنترل کننده رویداد انجام میدهد.
برای ایجاد کنترل سفارشی خود، قوانین کمی لازم است. با این حال، دستورالعمل های زیر می تواند به عنوان بهترین عمل عمل کند:
- CSS مناسب را برای نمایش عنصر(های) کنترل تعریف کنید.
- تعامل با کاربر یا نقشه را از طریق کنترلکنندههای رویداد برای تغییرات ویژگی نقشه یا رویدادهای کاربر (مثلاً رویدادهای
'click'
) انجام دهید. - یک عنصر
<div>
برای نگه داشتن کنترل ایجاد کنید و این عنصر را به ویژگیcontrols
Map
اضافه کنید.
در زیر به هر یک از این نگرانی ها پرداخته شده است.
ترسیم کنترل های سفارشی
اینکه چگونه کنترل خود را به دست می آورید به شما بستگی دارد. به طور کلی، توصیه می کنیم تمام نمایش کنترل خود را در یک عنصر <div>
قرار دهید تا بتوانید کنترل خود را به عنوان یک واحد دستکاری کنید. ما از این الگوی طراحی در نمونه های زیر استفاده خواهیم کرد.
طراحی کنترل های جذاب نیاز به دانشی در مورد ساختار CSS و DOM دارد. کد زیر تابعی را برای ایجاد یک عنصر دکمه ای نشان می دهد که نقشه را در مرکز شیکاگو می چرخاند.
function createCenterControl(map) { const controlButton = document.createElement("button"); // Set CSS for the control. controlButton.style.backgroundColor = "#fff"; controlButton.style.border = "2px solid #fff"; controlButton.style.borderRadius = "3px"; controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)"; controlButton.style.color = "rgb(25,25,25)"; controlButton.style.cursor = "pointer"; controlButton.style.fontFamily = "Roboto,Arial,sans-serif"; controlButton.style.fontSize = "16px"; controlButton.style.lineHeight = "38px"; controlButton.style.margin = "8px 0 22px"; controlButton.style.padding = "0 5px"; controlButton.style.textAlign = "center"; controlButton.textContent = "Center Map"; controlButton.title = "Click to recenter the map"; controlButton.type = "button"; // Setup the click event listeners: simply set the map to Chicago. controlButton.addEventListener("click", () => { map.setCenter(chicago); }); return controlButton; }
مدیریت رویدادها از کنترل های سفارشی
برای اینکه یک کنترل مفید باشد، در واقع باید کاری انجام دهد. آنچه که کنترل انجام می دهد به شما بستگی دارد. کنترل ممکن است به ورودی کاربر پاسخ دهد، یا ممکن است به تغییرات در وضعیت Map
پاسخ دهد.
برای پاسخ دادن به ورودی کاربر، از addEventListener()
استفاده کنید که رویدادهای DOM پشتیبانی شده را مدیریت می کند. قطعه کد زیر یک شنونده برای رویداد 'click'
مرورگر اضافه می کند. توجه داشته باشید که این رویداد از DOM دریافت می شود نه از نقشه.
// Setup the click event listener: set the map to center on Chicago var chicago = {lat: 41.850, lng: -87.650}; controlButton.addEventListener('click', () => { map.setCenter(chicago); });
ایجاد کنترل های سفارشی در دسترس
برای اطمینان از اینکه کنترلها رویدادهای صفحهکلید را دریافت میکنند و به درستی در صفحهخوانها ظاهر میشوند:
- همیشه از عناصر بومی HTML برای دکمه ها، عناصر فرم و برچسب ها استفاده کنید. فقط از یک عنصر DIV به عنوان یک کانتینر برای نگهداری کنترل های بومی استفاده کنید. هرگز از یک DIV به عنوان یک عنصر رابط کاربری تعاملی استفاده نکنید.
- در صورت لزوم از عنصر
label
، ویژگیtitle
یا ویژگیaria-label
برای ارائه اطلاعات در مورد یک عنصر UI استفاده کنید.
موقعیت یابی کنترل های سفارشی
کنترلهای سفارشی با قرار دادن آنها در موقعیتهای مناسب در ویژگی controls
شی Map
، روی نقشه قرار میگیرند. این ویژگی شامل آرایه ای از google.maps.ControlPosition
s است. با افزودن Node
(معمولاً <div>
) به یک ControlPosition
مناسب، یک کنترل سفارشی به نقشه اضافه میکنید. (برای کسب اطلاعات در مورد این موقعیت ها، به موقعیت کنترل در بالا مراجعه کنید.)
هر ControlPosition
یک MVCArray
از کنترل های نمایش داده شده در آن موقعیت را ذخیره می کند. در نتیجه، هنگامی که کنترلها از موقعیت اضافه یا حذف میشوند، API کنترلها را متناسب با آن بهروزرسانی میکند.
API کنترل ها را در هر موقعیت به ترتیب یک ویژگی index
قرار می دهد. ابتدا کنترل هایی با شاخص کمتر قرار می گیرند. به عنوان مثال، دو کنترل سفارشی در موقعیت BOTTOM_RIGHT
مطابق با این ترتیب شاخص تنظیم میشوند و مقادیر شاخص پایینتر اولویت دارند. به طور پیش فرض، تمام کنترل های سفارشی پس از قرار دادن هر کنترل پیش فرض API قرار می گیرند. شما میتوانید این رفتار را با تنظیم ویژگی index
کنترل به عنوان یک مقدار منفی لغو کنید. کنترل های سفارشی را نمی توان در سمت چپ لوگو یا سمت راست حق چاپ قرار داد.
کد زیر یک کنترل سفارشی جدید ایجاد می کند (سازنده آن نشان داده نمی شود) و آن را در موقعیت TOP_RIGHT
به نقشه اضافه می کند.
var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Create a DIV to attach the control UI to the Map. const centerControlDiv = document.createElement("div"); // Create the control. This code calls a function that // creates a new instance of a button control. const centerControl = createCenterControl(map); // Append the control to the DIV. centerControlDiv.appendChild(centerControl); // Add the control to the map at a designated control position // by pushing it on the position's array. This code will // implicitly add the control to the DOM, through the Map // object. You should not attach the control manually. map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
یک نمونه کنترل سفارشی
کنترل زیر ساده است (اگرچه چندان مفید نیست) و الگوهای نشان داده شده در بالا را ترکیب می کند. این کنترل با قرار دادن نقشه در یک مکان پیشفرض خاص به رویدادهای 'click'
DOM پاسخ میدهد:
TypeScript
let map: google.maps.Map; const chicago = { lat: 41.85, lng: -87.65 }; /** * Creates a control that recenters the map on Chicago. */ function createCenterControl(map) { const controlButton = document.createElement('button'); // Set CSS for the control. controlButton.style.backgroundColor = '#fff'; controlButton.style.border = '2px solid #fff'; controlButton.style.borderRadius = '3px'; controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; controlButton.style.color = 'rgb(25,25,25)'; controlButton.style.cursor = 'pointer'; controlButton.style.fontFamily = 'Roboto,Arial,sans-serif'; controlButton.style.fontSize = '16px'; controlButton.style.lineHeight = '38px'; controlButton.style.margin = '8px 0 22px'; controlButton.style.padding = '0 5px'; controlButton.style.textAlign = 'center'; controlButton.textContent = 'Center Map'; controlButton.title = 'Click to recenter the map'; controlButton.type = 'button'; // Setup the click event listeners: simply set the map to Chicago. controlButton.addEventListener('click', () => { map.setCenter(chicago); }); return controlButton; } function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { zoom: 12, center: chicago, }); // Create the DIV to hold the control. const centerControlDiv = document.createElement('div'); // Create the control. const centerControl = createCenterControl(map); // Append the control to the DIV. centerControlDiv.appendChild(centerControl); map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
جاوا اسکریپت
let map; const chicago = { lat: 41.85, lng: -87.65 }; /** * Creates a control that recenters the map on Chicago. */ function createCenterControl(map) { const controlButton = document.createElement("button"); // Set CSS for the control. controlButton.style.backgroundColor = "#fff"; controlButton.style.border = "2px solid #fff"; controlButton.style.borderRadius = "3px"; controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)"; controlButton.style.color = "rgb(25,25,25)"; controlButton.style.cursor = "pointer"; controlButton.style.fontFamily = "Roboto,Arial,sans-serif"; controlButton.style.fontSize = "16px"; controlButton.style.lineHeight = "38px"; controlButton.style.margin = "8px 0 22px"; controlButton.style.padding = "0 5px"; controlButton.style.textAlign = "center"; controlButton.textContent = "Center Map"; controlButton.title = "Click to recenter the map"; controlButton.type = "button"; // Setup the click event listeners: simply set the map to Chicago. controlButton.addEventListener("click", () => { map.setCenter(chicago); }); return controlButton; } function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: chicago, }); // Create the DIV to hold the control. const centerControlDiv = document.createElement("div"); // Create the control. const centerControl = createCenterControl(map); // Append the control to the DIV. centerControlDiv.appendChild(centerControl); map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } window.initMap = initMap;
Sample را امتحان کنید
اضافه کردن حالت به کنترل ها
کنترل ها همچنین ممکن است وضعیت را ذخیره کنند. مثال زیر شبیه به آنچه قبلا نشان داده شده است، است، اما کنترل حاوی یک دکمه "تنظیم صفحه اصلی" اضافی است که کنترل را برای نمایش یک مکان خانه جدید تنظیم می کند. ما این کار را با ایجاد یک ویژگی home_
در داخل کنترل انجام می دهیم تا این حالت را ذخیره کند و گیرنده ها و تنظیم کننده ها را برای آن حالت فراهم کنیم.
TypeScript
let map: google.maps.Map; const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 }; /** * The CenterControl adds a control to the map that recenters the map on * Chicago. */ class CenterControl { private map_: google.maps.Map; private center_: google.maps.LatLng; constructor( controlDiv: HTMLElement, map: google.maps.Map, center: google.maps.LatLngLiteral ) { this.map_ = map; // Set the center property upon construction this.center_ = new google.maps.LatLng(center); controlDiv.style.clear = "both"; // Set CSS for the control border const goCenterUI = document.createElement("button"); goCenterUI.id = "goCenterUI"; goCenterUI.title = "Click to recenter the map"; controlDiv.appendChild(goCenterUI); // Set CSS for the control interior const goCenterText = document.createElement("div"); goCenterText.id = "goCenterText"; goCenterText.innerHTML = "Center Map"; goCenterUI.appendChild(goCenterText); // Set CSS for the setCenter control border const setCenterUI = document.createElement("button"); setCenterUI.id = "setCenterUI"; setCenterUI.title = "Click to change the center of the map"; controlDiv.appendChild(setCenterUI); // Set CSS for the control interior const setCenterText = document.createElement("div"); setCenterText.id = "setCenterText"; setCenterText.innerHTML = "Set Center"; setCenterUI.appendChild(setCenterText); // Set up the click event listener for 'Center Map': Set the center of // the map // to the current center of the control. goCenterUI.addEventListener("click", () => { const currentCenter = this.center_; this.map_.setCenter(currentCenter); }); // Set up the click event listener for 'Set Center': Set the center of // the control to the current center of the map. setCenterUI.addEventListener("click", () => { const newCenter = this.map_.getCenter()!; if (newCenter) { this.center_ = newCenter; } }); } } function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 12, center: chicago, }); // Create the DIV to hold the control and call the CenterControl() // constructor passing in this DIV. const centerControlDiv = document.createElement("div"); const control = new CenterControl(centerControlDiv, map, chicago); // @ts-ignore centerControlDiv.index = 1; centerControlDiv.style.paddingTop = "10px"; map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
جاوا اسکریپت
let map; const chicago = { lat: 41.85, lng: -87.65 }; /** * The CenterControl adds a control to the map that recenters the map on * Chicago. */ class CenterControl { map_; center_; constructor(controlDiv, map, center) { this.map_ = map; // Set the center property upon construction this.center_ = new google.maps.LatLng(center); controlDiv.style.clear = "both"; // Set CSS for the control border const goCenterUI = document.createElement("button"); goCenterUI.id = "goCenterUI"; goCenterUI.title = "Click to recenter the map"; controlDiv.appendChild(goCenterUI); // Set CSS for the control interior const goCenterText = document.createElement("div"); goCenterText.id = "goCenterText"; goCenterText.innerHTML = "Center Map"; goCenterUI.appendChild(goCenterText); // Set CSS for the setCenter control border const setCenterUI = document.createElement("button"); setCenterUI.id = "setCenterUI"; setCenterUI.title = "Click to change the center of the map"; controlDiv.appendChild(setCenterUI); // Set CSS for the control interior const setCenterText = document.createElement("div"); setCenterText.id = "setCenterText"; setCenterText.innerHTML = "Set Center"; setCenterUI.appendChild(setCenterText); // Set up the click event listener for 'Center Map': Set the center of // the map // to the current center of the control. goCenterUI.addEventListener("click", () => { const currentCenter = this.center_; this.map_.setCenter(currentCenter); }); // Set up the click event listener for 'Set Center': Set the center of // the control to the current center of the map. setCenterUI.addEventListener("click", () => { const newCenter = this.map_.getCenter(); if (newCenter) { this.center_ = newCenter; } }); } } function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: chicago, }); // Create the DIV to hold the control and call the CenterControl() // constructor passing in this DIV. const centerControlDiv = document.createElement("div"); const control = new CenterControl(centerControlDiv, map, chicago); // @ts-ignore centerControlDiv.index = 1; centerControlDiv.style.paddingTop = "10px"; map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); } window.initMap = initMap;