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

- visibility ٠ mode_comment

در این مطلب با ادامه آموزش 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

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

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

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

saied-h

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

قابلی نداشت ?

نیاز به لاگین

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