نقشه استاتیک آنلاین در سه سوت! بدون جاوا اسکریپت

خیلی وقت پیش بود که یکی از بازدیدکننده های طرح‌چه توی بخش نظرات از من پرسید که چجوری میتونیم نقشه ی آنلاین رو به صورت تصویر (عکس) روی سایت ساخت؟ (سورس کد نمونه مثال ها رو میتونید از انتهای پست دریافت کنید)

توی این پست هدف ما رسم نقشه به صورت عکس روی سایت هست. این نقشه با پسوند های png , gif و jpg قابل رسم خواهد بود , ما میتونیم نقشه ی مورد نظر خودمون رو با استفاده از سرویس google maps یا yandex maps رسم کنیم. روش کار به این صورت است که ما یه کوئری رو به سایت مورد نظر میدیم و تصویر نقشه ی مورد نظر خودمون رو دریافت میکنیم.

رسم نقشه ی استاتیک (عکس مانند) گوگل : در ابتدا به مثال زیر توجه کنید : (پیش نمایش این مثال رو میتونید از اینجا مشاهده کنید)

در مثال بالا ما در قسمت Src عکس اومدیم و با استفاده از ارسال query string به گوگل نقشه ی مورد نظرمون رو دریافت کردیم. تنظیمات کوئری استرینگ به صورت زیر خواهد بود:

  1. در قسمت center باید ادرس مورد نظر خودمون رو بدیم. مثلا ایران گرگان به صورت iran , gorgan خواهد بود. ادرس خیابان و شهر و کشور با استفاده از ویرگول از هم جدا میشن.
  2. قسمت zoom مقدار زوم نقشه رو تنظیم میکنه که حداقل ۱ و حداکثر ۲۲ خواهد بود. هرچی زوم بیشتر باشه شما جزئیات بیشتری رو مشاهده خواهید کرد. مثلا در حالت زوم ۱ شما نقشه رو از دور میبینید ولی در حالت زوم ۱۵ شما میتونید مسیر خیابون ها رو نیز مشاهده کنید
  3. قسمت Scale میزان بزرگ نمایی تصویر (بزرگتر بودن از اندازه ی پیکسلی که ما مشخص کردیم) رو مشخص میکنه مقدار پیش فرض ان False یا ۱ میباشد اما شما میتونید مثلا اون رو به ۲ تغییر بدید تا بزرگ نمایی تصویر شما دو برابر بشه.
  4. قسمت size برای مشخص کردن سایز تصویر نقشه مورد استفاده قرار میگره که دوتا عدد به ترتیب برای اندازه ی عرض و ارتفاع تصویر مورد استفاده قرار میگیره و این دو عدد با استفاده از حرف ایکس انگلیسی (x) از هم جدا میشن. مقدار واحد انها پیکسل در نظر گرفته خواهد شد.
  5. قسمت maptype برای مشخص کردن نوع نقشه استفاده میشه که نوع های آن roamap , terrain , satelite , hybrid میباشد که به ترتیب مسیر راه های خیابون , راه های مترو , نقشه ماهواره ای , نقشه هایبرید رو براتون رسم میکنه.
  6. قسمت format برای مشخص کردن پسوند تصویر دریافتی به کار میرود که میتواند مقدار png , gif , jpg رو دریافت کنه.
  7. قسمت visual_refresh رو همیشه برابر true قرار بدید. این قسمت برای کش نشدن تصویر باید true باشد.
  8. برای مارک زدن (علامت زدن) روی نقشه از دستور markers استفاده میکنیم و دارای تنظیمات size است که سه مقدار mid و tiny و small رو می پذیره و همچنین دارای تنظیم color است که کد هگزا رنگ می پذیره و همچنین label ادرس محل مورد نظر شما برای مارک زدن رو میپذیره و در اخر خاصیت alt یه متن جا نگهدار رو میپذیره که معمولا باید مقدارش با مقدار label یکسان باشه. خاصیت icon نیز در صورتی که بخواید مارکر شما عکس مورد نظر شما باشه مورد استفاده قرار میگیره و ادرس مطلق عکس شما رو میپذیره.

نمونه ی کامل مثال های استفاده از نقشه گوگل رو میتونید توی مثال زیر ببینید.

دوستان عزیز برای رسم نقشه گوگ به صورت اتوماتیک میتونید از این ابزار استفاده کنید (کلیک کنید)

رسم نقشه استاتیک (تصویر) یاندکس: در ابتدا به مثال زیر دقت کنید(برای دیدن پیش نمایش نقشه اینجا کلیک کنید)

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

امیدوارم این آموزش بدردتون بخوره. میتونید با استفاده از دستورات php تصاویر رو دریافت کنید و در اپلیکیشن ها و برنامه های خودتون استفاده کنید.

سورس کد مثال ها رو میتونید از انتهای این پست دریافت کنید.

سورس کد رسم نقشه گوگل و یاندکس
سورس کد رسم نقشه گوگل و یاندکس
staticmap-google-yandex.zip
Version: 1.0
31.9 KiB
20 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. یک کاربر

    سلام
    خیلی متشکرم که علارقم مشغله ، درخواست من رو اجابت کردید
    موفق و پاینده باشید

    • سلام فایل درخواستی رو براتون ایمیل کردم و به زودی یه پست هم راجب شکستن عکس به پارت های کوچکتر مثل گوگل مپز میزارم ببینید

می‌خواهید دیدگاهتان را بیان کنید؟