تخفیف ویژه

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 8) - کنترلرهای رابط کاربری - قسمت 4

دسته بندی: آموزش
زمان مطالعه: 8 دقیقه
۱۸ تیر ۱۳۹۵

در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.

google-maps

تغییر دادن تنظیمات مربوط به هر کنترلر

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

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:10,               
               mapTypeControl: 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>

خروجی بصورت زیر هست:map type google maps

میبینید که منو بصورت افقی هست و گزینه‌های اون هم Terrain و Satellite هست. حالا میتونین با استفاده از روش زیر منو رو بصورت Drop Down در بیارید:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:10,               
               mapTypeControl: true,

               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
               }
            }
            
            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>

خروجی بصورت زیر هست:drop down map type

میبینید که با استفاده از ویژگی mapTypeControlOptions و قرار دادن google.maps.MapTypeControlStyle.DROPDOWN_MENU برای ویژگی Style، منوها رو بصورت Drop Down در آوردیم. ویژگی هایی که میشه برای نوع منو قرار داد بصورت زیر هست:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR : منو بصورت افقی در میاد
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU : منو بصورت Drop Down در میاد
  • google.maps.MapTypeControlStyle.DEFAULT : منو بصورت پیش فرض نمایش داده میشه

همچنین میتونیم با استفاده از ویژگی mapTypeIds گزینه هایی که در این منو نمایش داده میشه رو مشخص کنیم. برای اینکار بصورت زیر عمل میکنیم:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:10,               
               mapTypeControl: true,

               mapTypeControlOptions: {
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.HYBRID
                  ]
               }
            }
            
            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>

خروجی بصورت زیر میشه:map type ids google maps

دیدید که تونستیم گزینه هایی که در منوی گوگل مپ نمایش داده میشه رو عوض کنیم.

همچنین به راحتی میتونین مکان قرار گیری کنترلها رو در Google Maps رو به راحتی عوض کنید. مکانهایی که میتونین کنترلها رو در اونجا قرار بدین، بصورت زیر هست:

  • TOP_CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

از روی اسم هر کدوم از موارد بالا میشه به راحتی معنی اون رو فهمید. برای مثال TOP_CENTER به معنای اینه که کنترلر رو در بالا و وسط نقشه نمایش میده.

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

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:10,               
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER
               },
               
               zoomControl: true,
               
               zoomControlOptions: {
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
            
            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>

خروجی بصورت زیر میشه:change position control google maps

میبینید که یکی از موقعیتهایی که بیان کردیم رو بعنوان مقدار ویژگی position قرار دادیم. برای مثال برای کنترلر بزرگنمایی مقدار google.maps.ControlPosition.BOTTOM_CENTER رو قرار دادیم که باعث میشه اون کنترلر در مکان پایین و وسط نقشه قرار بگیره.

در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.