تخفیف ویژه

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 13) - اضافه کردن Shape - قسمت 2

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

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

google-maps

در جلسه قبل در مورد قرار دادن polyline و polygon صحبت کردیم و در این قسمت قصد داریم اشکال مستطیل و دایره رو هم بهتون آموزش بدیم.

مستطیل یا Rectangle

با استفاده از قابلیت اضافه کردن Rectangle که نقشه گوگل در اختیار ما قرار داده، میتونیم مستطیل هایی رو بر روی نقشه مشخص کنیم. شما میتونین با استفاده از نمونه ساختن از شئ google.maps.Rectangle این کار رو انجام بدین.

در اینجا میخایم یک ناحیه مستطیلی رو مشخص کنیم و اونو به رنگ آبی در بیاریم و به کاربران بفهمونیم که ما با این ناحیه سر و کار داریم. برای این کار بصورت زیر عمل میکنیم:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
         
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:7,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
               
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

خروجی بصورت زیر خواهد بود:rectangle google maps

همونطور که دیدید یک ناحیه مستطیلی شکل بصورت آبی رنگ در اومده. کد اصلی بصورت زیر هست:

var myrectangle = new google.maps.Rectangle({
   strokeColor:"#0000FF",
   strokeOpacity:0.6,
   strokeWeight:2,
   
   fillColor:"#0000FF",
   fillOpacity:0.4,
   map:map,
   
   bounds:new google.maps.LatLngBounds(
      new google.maps.LatLng(17.342761, 78.552432),
      new google.maps.LatLng(16.396553, 80.727725)
   )
   
});

میبینید که یک نمونه جدید از شئ google.maps.Rectangle ساخته شده و درون ویژگی bounds اون 2 نقطه ای که مد نظرمون هست رو وارد کردیم. نقطه اول مختصات جغرافیایی گوشه بالا و سمت چپ مستطیل و نقطه دوم نیز مختصات گوشه پایین و سمت راست مستطیل را مشخص می‌کند. بعد از اون از ویژگی‌های دیگه ای استفاده کردیم که ظاهر مستطیل رو مشخص کنه. با strokeColor رنگ خطوط رو مشخص میکنیم، با strokeOpacity شفافیت خطوط رو مشخص میکنیم و با strokeWeight هم ضخامت خطوط رو مشخص میکنیم.

دایره یا Circle

با استفاده از قابلیت اضافه کردن Circle که نقشه گوگل در اختیار ما قرار داده، میتونیم دایره هایی رو بر روی نقشه مشخص کنیم. شما میتونین با استفاده از نمونه ساختن از شئ google.maps.Circle این کار رو انجام بدین.

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

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
         
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
            
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی بصورت زیر خواهد بود:circle google maps

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

var myCity = new google.maps.Circle({
   center:new google.maps.LatLng(28.613939,77.209021),
   radius:150600,

   strokeColor:"#B40404",
   strokeOpacity:0.6,
   strokeWeight:2,

   fillColor:"#B40404",
   fillOpacity:0.6
});

میبینید که یک نمونه جدید از شئ google.maps.Circle ساخته شده و درون ویژگی center اون نقطه ای که مد نظرمون هست رو وارد کردیم تا بعنوان مرکز دایره قرار بگیره. بعد از اون با استفاده از ویژگی fillColor رنگ درونی ناحیه رو مشخص کردیم و با استفاده از ویژگی fillOpacity هم شفافیت اون رو تعریف کردیم.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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