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

- visibility ٠ mode_comment

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

google-maps

در جلسه قبل در مورد قرار دادن polyline و polygon صحبت کردیم و در این قسمت قصد داریم اشکال مستطیل و دایره رو هم بهتون آموزش بدیم.

مستطیل یا Rectangle

با استفاده از قابلیت اضافه کردن Rectangle که نقشه گوگل در اختیار ما قرار داده، میتونیم مستطیل هایی رو بر روی نقشه مشخص کنیم. شما میتونین با استفاده از نمونه ساختن از شئ google.maps.Rectangle این کار رو انجام بدین.

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

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

همونطور که دیدید یک ناحیه مستطیلی شکل بصورت آبی رنگ در اومده. کد اصلی بصورت زیر هست:

میبینید که یک نمونه جدید از شئ google.maps.Rectangle ساخته شده و درون ویژگی bounds اون 2 نقطه ای که مد نظرمون هست رو وارد کردیم. نقطه اول مختصات جغرافیایی گوشه بالا و سمت چپ مستطیل و نقطه دوم نیز مختصات گوشه پایین و سمت راست مستطیل را مشخص می کند. بعد از اون از ویژگی های دیگه ای استفاده کردیم که ظاهر مستطیل رو مشخص کنه. با strokeColor رنگ خطوط رو مشخص میکنیم، با strokeOpacity شفافیت خطوط رو مشخص میکنیم و با strokeWeight هم ضخامت خطوط رو مشخص میکنیم.

دایره یا Circle

با استفاده از قابلیت اضافه کردن Circle که نقشه گوگل در اختیار ما قرار داده، میتونیم دایره هایی رو بر روی نقشه مشخص کنیم. شما میتونین با استفاده از نمونه ساختن از شئ google.maps.Circle این کار رو انجام بدین.

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

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

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

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

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران
saied-h

خدا خیرت بده! ممنونم از تو دوست عزیزم. هیچ مرجع فارسی زبانی در این مورد صحبت نکرده بود!
فقط یه سوال داشتم:
این که برای نسخه پایه 25000 بار نقشه رو به کاربر نشون میده، یعنی شامل نقشه های ثبت شده + نقشه هایی که فقط دیده می شوند؟
تصور کنید یک وبسایتی که کاربرای اون سایت، برای هر پست خودشون نقشه ثبت میکنند. مثل سایت های املاک.
این 25000 بار شامل کدوم میشه؟
ثبت شده ها + دیده شده ها ؟
یا فقط دیده شده ها ؟

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

saied-h

متوجه شدم. واقعاً کارت عالی و قشنگ بود!
ممنون از تو به خاطر گذاشتن این پست. اون هم به این سرعت!

قابلی نداشت ?

نیاز به لاگین

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