آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 15) - کار با symbol - قسمت 1

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

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

google-maps

علاوه بر Marker و Polyline و Polygon و دیگر اشکال هندسی، ما همچنین میتونیم تصاویر برداری و SVG از قبل تعریف شده رو به نقشمون اضافه کنیم. این جلسه به شما آموزش میده که چطور از Symbol‌ها در گوگل مپ استفاده کنید.

اضافه کردن یک Symbol

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

  • Circle : شکل دایره ساده رو به عنوان Symbol قرار میده
  • BACKWARD_CLOSED_ARROW : فلش رو به پایین و بسته یا close رو در نقطه مورد نظر قرار میده
  • FORWARD_CLOSED_ARROW : فلش رو به بالا و بسته یا close رو در نقطه مورد نظر قرار میده
  • BACKWARD_OPEN_ARROW : فلش رو به پایین و باز یا open رو در نقطه مورد نظر قرار میده
  • FORWARD_OPEN_ARROW : فلش رو به بالا و باز یا open رو در نقطه مورد نظر قرار میده

این شکلک‌ها دارای ویژگی‌های مشترک زیر هستند که متیونین متناسب با نیاز از اونا استفاده کنید:

  • path : با استفاده از این ویژگی میتونین نام اون شکلکی که در بالا بیان شد رو وارد کنید و یا یک مسیر SVG رو قرار بدید تا در خروجی نمایش داده بشه
  • fillColor : با استفاده از این ویژگی میتونید رنگ درونی یا پس زمینه شکلک رو عوض کنید
  • fillOpacity : تغییر شفافیت شکلک
  • scale : با استفاده از این ویژگی میتونین شکلک مورد نظر رو بزرگ و کوچک کنید. مثلا 0.5 اون رو نصف و 2 اون رو دو برابر میکنه
  • strokeColor : مشخص کردن رنگ border
  • strokeOpacity : مشخص کردن شفافیت border
  • strokeWeight : مشخص کردن ضخامت border

حالا در اینجا میخایم برای هر کدام از موارد بالا یک مثال بزنیم.

مثال Circle:

<!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.433053, 78.412172),
               zoom: 5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"), mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               map: map,               
               icon: {
			        path: google.maps.SymbolPath.CIRCLE,
			        strokeWeight: 5,
			        strokeColor: '#ff0000',
			        scale: 10
			    }
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id="sample" style="width:580px; height:400px;"></div>
   </body>
   
</html>

میبینید که یک marker بصورت زیر تعریف کردیم:

var marker = new google.maps.Marker({
   position: map.getCenter(),
   map: map,               
   icon: {
        path: google.maps.SymbolPath.CIRCLE,
        strokeWeight: 5,
        strokeColor: '#ff0000',
        scale: 10
    }
});

میبینید که درون ویژگی position موقعیت نشانه رو مشخص کردیم. برای اینکار از متد getCenter برای map استفاده کردیم. این کد باعث میشه که ویژگی center تعریف شده درون map رو بعنوان position قرار بده. قطعه کد اصلی در مقابل ویژگی icon قرار داده شده که همون symbol رو مشخص میکنه. همونطور که دیدید در مقابل ویژگی path ابتدا google.maps.SymbolPath قرار میگیره و بعد از اون یکی از 5 مورد بیان شده در بالا میاد. با استفاده از scale هم اون شکلک رو 10 برابر بزرگتر کردیم که واضح باشه.

خروجی بصورت زیر میشه:circle symbol google maps

مثال BACKWARD_CLOSED_ARROW:

<!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.433053, 78.412172),
               zoom: 5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"), mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               map: map,               
               icon: {
			        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
			        strokeWeight: 5,
			        strokeColor: '#ff0000',
			        scale: 10
			    }
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id="sample" style="width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی:backward symbol google maps

مثال FORWARD_CLOSED_ARROW:

<!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.433053, 78.412172),
               zoom: 5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"), mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               map: map,               
               icon: {
			        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
			        strokeWeight: 5,
			        strokeColor: '#ff0000',
			        scale: 10
			    }
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id="sample" style="width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی:foreward symbol google maps

مثال BACKWARD_OPEN_ARROW:

<!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.433053, 78.412172),
               zoom: 5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"), mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               map: map,               
               icon: {
			        path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
			        strokeWeight: 5,
			        strokeColor: '#ff0000',
			        scale: 10
			    }
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id="sample" style="width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی:backward open symbol google maps

مثال FORWARD_OPEN_ARROW:

<!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.433053, 78.412172),
               zoom: 5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"), mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               map: map,               
               icon: {
			        path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
			        strokeWeight: 5,
			        strokeColor: '#ff0000',
			        scale: 10
			    }
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id="sample" style="width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی:forward open symbol google maps

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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