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

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

SmallWorld.js : تولید کردن نقشه کوچک جهان

0 1897 ۲ آبان ۹۳

در این مطلب میخوام ابزاری رو بهتون معرفی کنم که با استفاده از اون میتونین نقشه ی کوچکی از جهان رو در ساییتون قرار بدین.

خب برای شروع به بخش مربوط به این ابزار در Github برید. از سمت راست روی دکمه Download Zip کلیک کنید ، تا محتویاتش دانلود بشه.

برای دیدن دمو میتونین اینجا رو ببینید.

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

  • smallworld.jquery.js
  • smallworld.js
  • world.json

در این ابزار باید از کتابخونه ی jQuery هم استفاده کنید.

برای کارایی بهتر میتونین این کدهارو روی Localhost اجرا کنید.

خب برای شروع یه پوشه بسازید و فایلهای مورد نظر رو به اون اضافه کنید. حالا یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

در خط 14 اومدیم و یک div با id = map ساختیم. در قسمت Head هم کدهای CSS رو قرار دادیم و اینطوری عرض و ارتفاع رو برای div مشخص میکنیم. عرض و ارتفاع نقشمون رو با استفاده از CSS مشخص میکنیم.

در خط 16 و 17 و 18 فایلهای Javascript رو اضافه کردیم.

در انتها هم تگ باز و بسته ی Script رو قرار دادیم ، تا کدهای مورد نظر خودمونو در اونجا قرار بدیم.

برای استفاده از این ابزار باید در دو تگ اسکریپت کدهای زیر رو قرار بدین :

تا اینجا فقط اطلاعاتی که درون فایل world.json هستند رو استفاده کردیم.

اگر تا اینجا خروجی رو در مرورگر ببینید ، بصورت زیر خواهد بود :

1

میبینید که همه چیز در حالت پیش فرض هست. یعنی مرکز نقشه در نقطه ی [ 0 , 0 ] قرار داره. ما میتونیم مرکز نقشه رو عوض کنیم و همچنین میتونیم ، بزرگنمایی ( Zoom ) صفحه رو بیشتر کنید. بصورت زیر :

مقدار پیش فرض بزرگنمایی 0 هست. شما میتونین همانند کدهای بالا zoom رو به عدد دلخواهتون تغییر بدین و مرکز نقشه رو هم با خاصیت center عوض کنید. اگر اینکارارو انجام بدین ، تصویر زیر رو نمایش میده :

2

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

با اینکار چنین چیزی در خروجی خواهید دید :

3

همچنین شما میتونین بعضی از نقاط نقشه رو علامتگذاری کنید. این کار با استفاده از خصوصیت marker انجام میشه. همچنین با استفاده از خصوصیت markerSize میتونین سایز اون مارکر رو عوض کنید. با استفاده از خصوصیت markerColor هم میتونین رنگ اون مارکر رو عوض کنید. بصورت زیر :

چیزی که در خروجی میبینید ، بصورت زیر :

4

همچنین میتونین با استفاده از خصوصیت markers چندین نشونه بر روی نقشه قرار بدین :

خروجی هم بصورت زیر هست :

5

خب دوستان خسته نباشید.

موفق باشید. یا علی

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram