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

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



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

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

0 238 ۲۳ تیر ۹۵

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

google-maps

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

چندخطی ها یا Polylines

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

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

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

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

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

چندضلعی یا Polygon

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

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

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

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

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

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

موفق باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram