در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
Google Maps کنترلرها و گزینه های زیادی رو قرار داده که کاربر با استفاده از اونا میتونه با نقشه تعامل داشته باشه و با اون ارتباط برقرار کنه. ما میتونیم این موارد رو اضافه کنیم و یا در اونا دستکاری انجام بدیم و یا حتی اونا رو حذف کنیم.
در ابنجا لیستی از کنترلرهای پیش فرضی که در همون ابتدا در Google Maps فعال هست رو خدمتتون میگیم:
اگه بخایم یک مثال از نمونه پیش فرض نقشه گوگل رو در اختیارتون بزاریم، بصورت زیر خواهد بود:
میبینید که اون موارد پیش فرضی که خدمتتون عرض کردم در نمونه بالا نمایش داده شده.
ما براحتی میتونیم با true قرار دادن ویژگی disableDefaultUI، کنترلهای پیش فرض Google Maps رو غیرفعال کرده و یک نقشه ساده رو به وجود بیاریم. برای این کار کدهای زیر رو در نظر بگیرید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(17.609993, 83.221436), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP, disableDefaultUI: true };
var map = new google.maps.Map(document.getElementById("sample"),mapOptions); } </script>
</head>
<body onload = "loadMap()"> <div id = "sample" style = "width:580px; height:400px;"></div> </body> </html> |
اگر خروجی رو نگاه کنیم، بصورت زیر خواهد بود:
میبینید که هیچ کدام از امکانهایی که در ابتدا عرض کرده بودیم فعال نیستن و حتی نمیشه با کلیدهای کیبورد اون رو جابجا کرد.
علاوه بر این کنترلرهای پیش فرضی که نقشه گوگل در اختیارمون میزاره، یک سری امکانات دیگه هم هست که میتونین با استفاده از اونا نقشتون رو بهتر و پیشرفته تر کنید.
بصورت زیر میتونین این ویژگی ها رو فعال و غیر فعال کنید و بجای هر کدام True یا False قرار بدین.
1 2 3 4 5 6 7 8 9 10 | { panControl: boolean, zoomControl: boolean, mapTypeControl: boolean, scaleControl: boolean, streetViewControl: boolean, overviewMapControl: boolean, rotateControl: boolean, fullscreenControl: boolean } |
در جلسه در مورد هر کدوم از موارد بالا بیشتر توضیح میدیم و مثالهایی رو براتون میاریم.
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 256