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

‏  7 دقیقه
۲۱ تیر ۱۳۹۵

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

google-maps

در جلسه قبل در مورد پیدا کردن موقعیت مورد نظر و نشان دادن اون در نقشه بحث کردیم. در این جلسه قصد داریم در مورد علایم و نشانه هایی که میشه بر روی نقشه قرار داد، صحبت کنیم.

ما میتونیم اشکال مختلفی رو به طول و عرض جغرافیایی که مد نظرمون هست اختصاص بدیم و کاری کنیم که در اونجا نمایش داده بشن. به این موارد در کل Overlay گفته میشه. نقشه گوگل overlays‌های زیر رو پشتیبانی میکنه:

  • Markers : برای قرار دادن نشانه بر روی نقشه
  • Polylines : برای قرار دادن خطهای پشت سرهم
  • Polygons : برای قرار دادن چند ضلعی ها
  • Circle and rectangle : برای قرار دادن دایره و مستطیل
  • Info window : برای قرار دادن باکس توضیح و اطلاعات
  • Symbols : برای قرار دادن سیمبول یا نماد یا علامت بر روی نقشه

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

اضافه کردن یک Marker ساده

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

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(17.088291, 78.442383),
   map: map
});

میبینید که یک متغیر بنام marker ساختیم و یک نمونه جدید از google.maps.Marker با استفاده از عملگر new ساختیم. درون این نمونه با استفاده از ویژگی position طول و عرض جغرافیایی رو مشخص کردیم و با استفاده از ویژگی map هم اون نقشه ای که قصد داریم این نشانه بر روی اون قرار بگیره رو قرار میدیم.

کل کد بصورت زیر میشه:

<!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.088291, 78.442383),
               zoom:12
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی بصورت زیر خواهد شد:simple marker google maps

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

  • DROP : در همون ابتدای نمایش نقشه نشانه از بالا به سمت پایین میوفته و در سر جای خودش قرار میگیره
  • BOUNCE : نشانه بصورت دائمی در نقطه مورد نظر بالا و پایین میشه

برای هر کدوم از موارد بالا مثالی رو میزنیم. در ابتدا برای DROP این کارو انجام میدیم. باید در مقابل ویژگی animation مقدار google.maps.Animation.DROP رو قرار بدیم تا انیمیشن DROP برای نشانه خودمون اعمال بشه. کدش بصورت زیر خواهد بود:

<!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.088291, 78.442383),
               zoom:12
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
               animation:google.maps.Animation.DROP
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی بصورت زیر میشه:drop animation google maps

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

<!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.088291, 78.442383),
               zoom:12
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
               animation:google.maps.Animation.BOUNCE
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی بصورت زیر میشه:bounce animation google mapsمیبینید که در این نمونه بصورت دائمی نشانه در حالت حرکت هست و متوقف نمیشه.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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