تخفیف ویژه

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

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

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

google-maps

در جلسات قبلی در مورد اضافه کردن نشانه یا Marker و تغیییر و دستکاری در اون توضیح دادیم و شما رو با امکانات و قابلیتهای اون آشنا کردیم. علاوه بر اضافه کردن Marker شما میتونین اشکال هندسی مختلفی نظیر چندخطی ها، چند ضلعی ها، مستطیل و دایره و ... رو نیز به نقشتون و نقطه دلخواهتون اضافه کنید. در این جلسه و جلسه بعد، اشکال مهمی که میتونین به نقشه اضافه کنید رو بهتون آموزش میدیم.

چندخطی‌ها یا Polylines

با استفاده از قابلیت اضافه کردن Polylines که نقشه گوگل در اختیار ما قرار داده، میتونیم مسیرهایی رو بر روی نقشه مشخص کنیم. شما میتونین با استفاده از نمونه ساختن از شئ google.maps.polyline این کار رو انجام بدین. همچنین در زمان ساخت نمونه باید مقادیر مناسبی رو برای ویژگی‌های هر مسیر قرار بدیم. همانند جلسه قبل که با استفاده از متد setMap، نشانگر رو به نقشه متصل میکردیم، اینجا نیز به همین صورت عمل میکنیم.

در اینجا میخایم یک مثال رو براتون بزنیم که در اون 3 خط قرار گرفته و 4 نقطه نیویورک در آمریکا، لندن در انگلیس، دهلی نو در هند و پکن در چین رو به هم وصل کرده. برای اینکار بصورت زیر عمل میکنیم:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
         
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:2,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

همونطور که دیدید خطوطی بین چهار مکانی که عرض کردم، رسم شده. برای این کار کدهای زیر استفاده شده:

var tourplan = new google.maps.Polyline({
   path:[
      new google.maps.LatLng(28.613939, 77.209021),
      new google.maps.LatLng(51.507351, -0.127758),
      new google.maps.LatLng(40.712784, -74.005941),
      new google.maps.LatLng(28.213545, 94.868713) 
   ],
   
   strokeColor:"#0000FF",
   strokeOpacity:0.6,
   strokeWeight:2
});

میبینید که یک نمونه جدید از شئ google.maps.polyline ساخته شده و درون ویژگی path اون 4 نقطه ای که مد نظرمون هست رو وارد کردیم. بعد از اون از ویژگی‌های دیگه ای استفاده کردیم که ظاهر خطوط رو مشخص کنه. با strokeColor رنگ خطوط رو مشخص میکنیم، با strokeOpacity شفافیت خطوط رو مشخص میکنیم و با strokeWeight هم ضخامت خطوط رو مشخص میکنیم.

چندضلعی یا Polygon

با استفاده از چندضلعی‌ها میتونین ناحیه ای رو با استفاده از چند ضلعی انتخاب کنید و رنگ اونا رو عوض کنید و به این صورت به کاربران نشون بدید که شما این محدوده مد نظرتون هست. برای اینکار باید یک نمونه از شئ google.maps.Polygon بسازیم. حالا میخایم مثالی رو در اختیارتون قرار بدیم که در اون سه تا از شهرهای هند رو در اون مشخص کنیم. برای این کار بصورت زیر عمل میکنیم:

<!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:6,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var flightPath = new google.maps.Polygon({
               path: [
                  new google.maps.LatLng(17.385044, 78.486671),
                  new google.maps.LatLng(19.696888, 75.322451), 
                  new google.maps.LatLng(21.056296, 79.057803)
               ],
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

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

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

var flightPath = new google.maps.Polygon({
   path: [
      new google.maps.LatLng(17.385044, 78.486671),
      new google.maps.LatLng(19.696888, 75.322451), 
      new google.maps.LatLng(21.056296, 79.057803)
   ],
   strokeColor:"#0000FF",
   strokeOpacity:0.8,
   strokeWeight:2,
   fillColor:"#0000FF",
   fillOpacity:0.4
});

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

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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