آخرین مطالب
امکانات وب
در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
در جلسه قبل توضیحاتی در مورد روش فعال و غیر فعال کردن کنترلرهای Google Maps دادیم و در این جلسه مباحث رو جلو میبریم.
برای اینکه کنترلر Zoom رو بردارید باید بصورت زیر عمل کنید:
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(36.964, -122.015), zoom:10, mapTypeId:google.maps.MapTypeId.HYBRID, zoomControl: false }
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> |
خروجی بصورت زیر هست:
همونطوری که در تصویر مشخص شده، دیگه اون کنترلر بزرگنمایی که + و - داشت، وجود نداره و برداشته شده.
میزان بزرگنمایی یا Scale در حالت اولیه بر روی نقشه نمایش داده نمیشه. برای اینکه میزان بزرگنمایی رو بر روی نقشه قرار بدیم باید بصورت زیر عمل کنیم:
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 28 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(36.964, -122.015), zoom:10, mapTypeId:google.maps.MapTypeId.HYBRID, zoomControl: false, scaleControl: 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> |
خروجی بصورت زیر هست:
همونطور که در تصویر بالا مشخص کردیم، یک بخش بزرگنمایی به پایین نقشه اضافه شده و بزرگنمایی کنونی نقشه رو نمایش میده. همونطور که میبینید یک اندازه رو مشخص کرده و گفته این اندازه بر روی نقشه معادل با 5 کیلومتر واقعی هست. اگر بر روی مقیاس کلیک کنید واحدها عوض میکشن و بجای نمایش km و m واحدهای mi و ft نمایش داده میشه. km و m و mi و ft به ترتیب به معنای کیلومتر، متر، مایل و فوت هستند.
حالا میخایم اون قسمتی که در بالا و سمت چپ قرار داره و میشه با استفاده از اون نوع نقشه رو تغییر داد، مخفی کنیم و همچنین اون آدمک یا Street View که در سمت راست هست رو برداریم. برای اینکار بصورت زیر عمل میکنیم:
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 28 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap() {
var mapOptions = { center:new google.maps.LatLng(36.964, -122.015), zoom:10, mapTypeId:google.maps.MapTypeId.HYBRID, streetViewControl: false, mapTypeControl: false }
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> |
خروجی بصورت زیر هست:
همونطور که در تصویر بالا میبینید ویژگی های Street View و Map type مخفی شدن.
اگر بخوام شما رو با کاربرد Street View آشنا کنم، باید مثالی رو براتون بزنم. اول اینکه از این ویژگی فقط در نقاطی که عکسی از اون نقطه در Google Maps وجود داره، میتونین استفاده کنید. برای اینکه بفهمید چه نقاطی بر روی نقشه از این ویژگی پشتیبانی میکنن، اون آدمک رو با ماوس گرفته و بر روی نقشه درگ کنید، اما ماوس رو رها نکنید و منتظر بمونید تا مناطق پشتیبانی کننده رنگشون عوض بشه:
میبینید که ما آدمک رو درگ کردیم و بدون رها کردن ماوس، اون رو روی نقشه نگه داشتیم. همونطور که مشاهده میکنید، یک سری از نقاط به رنگ آبی در اومدن. رنگهای آبی به معنای اونه که در Google Maps برای این نقاط تصاویر پانورما و 360 درجه ای قرار داده شده. شما میتونین آدمک رو روی یکی از اونا نگه دارید و رها کنید:
برای مثال من آدمک رو بر روی حرم مطهر شاهچراغ بردم و میبینید که یه تصویر اولیه رو بهم نشون میده و زیر اون هم نام عکاس رو که Omid Jafaezhad هست قرار میده. حالا اگر آدمک رو رها کنیم وارد تصویر 360 درجه ای مربوط به حرم مطهر میشیم:
همونطور که دیدید وارد تصویر پانورما شدیم، حالا میتونیم با نگه داشتن کلیک ماوس و درگ کردن، کل محوطه حرم و اطراف رو ببینید. در تصویر اعدادی قرار داده شده که بصورت زیر هستند:
- برگشت به نقشه اصلی
- تمام صفحه کردن
- جهت قطب نما
با استفاده از ویژگی Street View میتونین به کل جهان سفر کنید و خیابون ها و مکانهای مختلف رو ببینید و یا حتی میتونید به سایت اصلی Google Map برید و خودتون یک تصویر از مکان مورد نظرتون قرار بدین.
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 238
آرشیو مطالب
- دی 1394
- بهمن 1394
- اسفند 1394
- دی 1395
- بهمن 1395
- اسفند 1395
- فروردين 1395
- ارديبهشت 1395
- خرداد 1395
- تير 1395
- مرداد 1395
- شهريور 1395
- مهر 1395
- آبان 1395
- آذر 1395
- دی 1396
- بهمن 1396
- اسفند 1396
- فروردين 1396
- ارديبهشت 1396
- خرداد 1396
- تير 1396
- مرداد 1396
- شهريور 1396
- مهر 1396
- آبان 1396
- آذر 1396
- دی 1397
- بهمن 1397
- اسفند 1397
- فروردين 1397
- ارديبهشت 1397
- خرداد 1397
- تير 1397
- مرداد 1397
- شهريور 1397
- آذر 1397
- دی 1398
- بهمن 1398
- اسفند 1398
- ارديبهشت 1398
- تير 1398
- مرداد 1398
- مهر 1398
- آبان 1398
- آذر 1398
- فروردين 1399
- ارديبهشت 1399
- خرداد 1399
- تير 1399
- شهريور 1399
- بهمن 1400
- اسفند 1400
- ارديبهشت 1400
- دی 1401
- بهمن 1401
- اسفند 1401
- ارديبهشت 1401
- خرداد 1401
- تير 1401
- مرداد 1401
- شهريور 1401
- مهر 1401
- آبان 1401
- آذر 1401
- دی 1402
- بهمن 1402
- اسفند 1402
- فروردين 1402
- ارديبهشت 1402
- خرداد 1402
- تير 1402
- مرداد 1402
- شهريور 1402
- مهر 1402
- آبان 1402
- آذر 1402
- فروردين 1403
- ارديبهشت 1403