• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6255 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

ترفندهای پیشرفته jQuery (قسمت 48)

2 382 ۶ آذر ۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم.
jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 86 : قرار دادن Google Map بسادگی هر چه تمامتر

اگر شما قبلا با API گوگل مپ کار کرده باشید میدونید که حتی برای قرار دادن یک نقشه ساده هم باید کد زیادی رو قرار بدین. یک ابزار بنام gmaps.js هست که این کار رو برای شما خیلی خیلی ساده میکنه.

در ابتدا باید ابزارهای مورد نظر رو include کنیم:

میبینید که هم Google map API رو اضافه کردیم و هم gmaps. این ابزار جایگزین Map API نمیشه بلکه مکمل اون هست و کارهای تکراری رو برای ما انجام داده و ما میتونیم به راحتی از اونا استفاده کنیم. با این ابزار میتونین به راحتی نقشه هاتونو در هر سایزی و در هر مختصاتی و با هر نشانه ای اضافه کنید و اونو در سایتتون قرار بدین و به کاربرانتون کمک کنید که شما رو بهتر پیدا کنند. میتونین کاری کنید که با کلیک کردن بر روی نشانه ها پیامهای مورد نظر به کاربر نمایش داده بشه و بطور کلی میتونین با کاربرانتون ارتباط داشته باشید و اونا رو راهنمایی کنید.

حالا یک div قرار میدیم و قصد داریم که نقشه مورد نظر در این div قرار بگیره:

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

میبینید که با استفاده از عملگر new یک نمونه از شئ GMaps ساحتیم و اونو در متغیر map قرار دادیم. با استفاده از ویژگی div مشخص میکنیم که نقشه در کجا قرار بگیره و با استفاده از lat و lng طول و عرض جغرافیایی که مدنظرمون هست رو وارد میکنیم تا نقشه نمایش داده بشه. حالا اگر خروجی رو ببینید یک نقشه قرار گرفته و هیچ نشانه و ... ندارد. میتونیم موارد دیگه رو به اون اضافه کنیم.

حالا دو نشانه یا marker به این نقشه اضافه میکنیم. با استفاده از متد addMarker میتونید یک نشانه به نقشه اضافه کنید:

با استفاده از ویژگی lat و lng مشخص میکنید میتونین مکان قرار گیری نشانه رو مشخص کنید و با استفاده از title میتونین عنوان نشانه رو انتخاب کنید و با استفاده از ویژگی click میتونیم کدهایی رو در مواقع کلیک شدن بر روی اون نشانه اجرا کنیم. با کلیک بر روی نشانه بالا یک alert داده میشه و پیام مورد نظر به کاربر نمایش داده میشه.

حالا یک نشانه دیگه اضافه میکنیم:

میبینید که تعدادی از ویژگی های قبل رو داره ولی یک ویژگی بنام infoWindow اضافه شده که با کلیک بر روی نشانه یک پیام نمایش داده میشه و اطلاعاتی در اون قرار میگیره.

خروجی:gmap

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

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام، ممنون از مطلب خوبی که قرار دادید. آقای اسفندیاری من روی یه سایت املاک دارم کار می کنم که به شدت نیاز دارم پلاگین نقشه رو در اون تعبیه کنم و این اجازه رو به کاربر بدم که با کلیک کردن روی نقشه بتونه آدرس خودش رو انتخاب و ثبت کنه، من این پلاگین رو پیدا کردم ( Mappy) اما نتونستم کارکردش رو متوجه بشم ( چون هنوز خوب و کامل به جاوا و جی کوئری مسلط نیستم :sad: :sad: ) ، ممکنه کمی من رو راهنمایی کنید، اگه پلاگین مشابه ی که می تونه کمک کنه معرفی کنید یا کار با همین پلاگین رو کمی به زبان ساده تر توضیح بدید من هدفم اینکه کاربر با کلیک بر روی نقشه بتونه آدرس رو پیدا کنه و من مختصات رو در کد بگیرم و در پایگاه ثبت کنم.
    خیلی فوری به این راهنمایی نیاز دارم .

    • ‏‏
      محمد اسفندیاری(۱۶ آذر ۱۳۹۴)

      دوست عزیز شما با استفاده از همین ابزار میتونین این کار رو انجام بدین. برای این کار کد زیر رو اضافه میکنیم:


      همونطور که دیدید یک رویداد کلیک برای نقشه تعریف کردیم و زمانی که بر روی هر جای نقشه کلیک بشه طول و عرض جغرافیایی در Alert نمایش داده میشه و شما میتونین مثلا اون رو در دیتابیس ذخیره کنید
      موفق باشید

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram