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

- visibility ۱۰ mode_comment

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

google-maps

در جلسه قبل در مورد Symbol های پیش فرضی که در Google maps وجود داره صحبت کردیم و برای هر کدام مثالی رو قرار دادیم. علاوه بر مقادیر از پیش تعریف شده ای که خود گوگل تعریف کرده، ما میتونیم اشکال مورد نظر خودمون رو بصورت SVG درست کرده و بعنوان Symbol ازشون استفاده کنیم. حالا شما میتونین یک path یا مسیر رو بسازید و کدهای SVG اون رو برای ویژگی path قرار بدین. یا اینکه آدرس URL فایل SVG رو در مقابل ویژگی url قرار بدین تا شکل مورد نظر بر روی نقطه دلخواه نمایش داده بشه.

حالا میخایم برای هر کدوم از موارد بالا مثال بیاریم.

روش اول:

در این روش بصورت ساده میایم و آدرس اون آیکون SVG که داریم رو در مقابل ویژگی url قرار میدیم تا اون آیکون در مختصات مشخص شده نمایش داده بشه:

میبینید که درون ویژگی icon و برای ویژگی url یک آدرس فایل SVG قرار داده شده. این فایل SVG همونطور که از اسمش پیداس، یک فلش به سمت راست هست. خروجی بصورت زیر خواهد بود:url svg symbil google maps

همونطور که دیدید آیکون مورد نظر در مختصات مشخص شده نمایش داده شد.

روش دوم:

در این روش میایم و کد SVG مربوط به مسیر آیکونی که مد نظر داریم رو، در مقابل ویژگی path قرار میدیم. آیکون های زیادی در وب بصورت SVG داره. برای مثال من آیکون زیر رو پیدا کردم:

shield

کد SVG و مسیر این آیکون بصورت زیر هست:

حالا اگر این مقدار رو در مقابل ویژگی path قرار بدین، این آیکون در مختصات مورد نظر نمایش داده خواهد شد:

میبینید که مسیر مورد نظر رو در مقابل ویژگی path قرار دادیم و رنگ اون رو مشخص کردیم و بزرگنمایی اون رو 2 برابر کرده و ضخامت خطوط اون رو برابر با 10 در نظر گرفتیم. خروجی بصورت زیر خواهد بود:path svg google maps

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

خروجی بصورت زیر خواهد بود:rotate and draggable symbol google maps

حالا میخایم قابلیت انیمیشنی نیز به این Symbol ها اضافه کنیم. همونطور که قبلا هم گفته شد دو نوع انیمیشن پیش فرض وجود داره. یکی DROP و دیگری BOUNCE. در پایین مثالی برای BOUNCE قرار میدیم:bounce animation symbol gooogle maps

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

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران
Amirhosein karimi

سلام خسته نباشید ,
آقا من وقتی از Google Map استفاده میکنم به این Error میخورم
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.
چه کارکنم ؟!

محمد اسفندیاری

دوست عزیز تا الان داشتیم این موارد رو بر روی یک فایل استاتیک و روی کامپیوتر تست میکردیم….حالا اگر بخواید نقشتون رو در سایت آنلاین استفاده کنید، باید یک API Key از گوگل دریافت کنید تا بتونید استفاده کنید….
در جلسات بعدی توضیح میدم
هنوز بهش نرسیدیم
موفق باشید

محمد اسفندیاری

در این آموزش بیان شده که چطور این کارو انجام بدین:
http://www.7learn.com/tutorials/learn-how-to-use-google-maps-part17

Amirhosein karimi

ممنونم , مشکلم حل شد

hamed_z2001

فقط باید بگم متاسفم واسه سایت بزرگ سون لرن, که تازگیا هدفش فقط درامدزایی شده و پول شده همه چیزش … یه زمانی هدف سایت توسعه وب فارسی بود … یه زمان حتی خود اقای اوند هم جواب سوالا رو میدادند , ولی کم کم این حس و هدف جاشو به بحثای مادی میده و اصن فکرش به بقیه نیست که یکی شاید نتونه vip بشه,کار جایی وخیمتر میشه که یک اموزش ساده و دنباله دار رو که از اول رایگان بود رو به یکباره پولی میکنه … فقط میگم متاسفم …

لقمان آوند

دوست عزیز ما سیاست هامون فرقی نکرده.
کافیه بخش نظرات سایت رو ببینید. شخص بنده مدام و هر روز پاسخگوی سوالات کاربرا هستم …
بخش vip چند ساله که در سایت هست و از همون موقع قرار بوده برخی از مطالب در این بخش و مختص این عزیزان باشه.
ضمن اینکه فقط با 4 تومان در ماه می تونید به همه مطالب vip دسترسی داشته باشید! واقعا آموزش و یادگیری این مباحث اینقدر براتون ارزش نداره؟؟؟ 4 تومان الان هزینه 1 بستنی و بسکوییته!
قیمت های بخش vip هم از 3 سال پیش تا الان بدون تغیره. اگر می خواستیم مادی گرا باشیم تا الان باید چند برابر می کردیم قیمت ها رو …
من خواهش می کنم دیدتون رو عوض کنید. برای داشتن آموزش های با کیفیت بد نیست یه هزینه اندکی بکنید!

hamed_z2001

آقای اوند عزیز.. من خودم رو از خانواده سون لرن میدونم و برای همین این حرفا رو میزنم … ۶,۷ سال پیش که من به این سایت پیوستم این چیزا واقعا نبود … من به شما ,اقای اسفندیاری و تمام تیم سون لرن علاقه و ارادت قلبی دارم ولی انصافا لجم درمیاد از برخی حرکات ….
خودتون ببینید مثلا تو همین دوره اموزشی …اموزشها رایگان بود ,به یکجایی که رسید یهو باید پول بدن تا ببینن . بلا تشبیه,اما کاری مه انجام شده چه فرقی با مواد فروشی که چند بار اول رایگان جنس میده,بعد که تبدیل به نیاز شد باید پول بده ,داره ؟؟ایناست که لج منو درمیاره,والا دوره های اموزشی که توی سایت هست,براشون از اول هزینه درنظر گرفته شده,مشکلیم نیست.ولی وسط کار یهو پولی کنن یک مطلب رو یکم حداقل برای من ی مقدار ثقیله.
,من هزینه رو برای خودم نگفتم,و واقعا مبلغی هم نیست,اما شاید برای کسی این مبلغ کم واقعا کم نباشه,

لقمان آوند

اول ممنونم از شما
اینکه این سری رو از اول vip بزاریم بهتره یا اینکه 50% اون رو رایگان و مابقی رو vip بزاریم؟
از اول یکی از تصمیمات این بوده که بعضی از سری ها کاملا vip باشه ولی بعدا نظرمون عوض شد و تصمیم گرفتیم که حداقل 50% اول سری ها رو رایگان بزاریم. که هم کاربرا بتونن از مطالب اولیه سری استفاده کنند و هم اگر از کیفیت اون راضی بودند بتونن در بخش vip ببینن. چون اگر همه رو vip بزاریم بعضا پیش میاد کاربرا چون اصلا محتوایی رو قبل از خرید ندیدند بعدا ممکنه ناراضی باشن از خریدشون
اینجوری حداقل کیفیت آموزش و نمونه هایی از آموزش رو دیدند .
بعد شما باید اینو هم در نظر بگیرید که توسعه و ادامه فعالیت های ما وابسته به تامین مالی مجموعه هست. قرار نیست که تا ابد همه چی رایگان باشه. همون مثالی که زدید که فلانی جنس رایگان میده و بعد پول میگیره که کار اشتباهی نیست! باید بازاریابی بشه و کیفیت کارشون رو نمایش بدن در ابتدای کار. کی میاد از جیب خودش خرج کنه و رایگان پخش کنه تا ابد؟؟؟ خوب اینطوری که فوری ورشکست میشه …
لطفا جنبه های دیگه بحث رو هم در نظر بگیرید …
بعد 4 تومان هم اصلا هزینه ای نیست که بگید یه نفر تو 1 ماه نتونه تامین کنه!
اگر چنین فردی واقعا وجود داشته باشه بدونید قطعا دسترسی به اینترنت نداره که بخواد اصلا به این سایت بیاد!

hamed_z2001

این قابل قبول تره,اینکه گفته بشه بخشی از اموزش به عنوان دمو انتشار پیدا میکنه,
ولی من هیچ جا این صحبت شما رو ندیدم و برای همین کمی دلخور شدم … طبیعتا همینطوره و باید خرج و مخارج سایت به نوعی دربیاد از خود سایت که هیچ,یک درامدی هم داشته باشه براتون … ولی خواهشا مثل خیلی از سایتا نگاهتون صرفا مادی نباشه … واقعا سایت دوست داشتنی ای داریم, امیدوارم روز بروز بهتر بشه …
اما برای مباحث مالی , همچین شرایطی هست , من خودم پارسال یه مدت توی این معذوریت مالی بودم , و اون موقع حتی ۴ تومن هم برام خیلی بود … چون ماشالا وضع شما ها خوبه ,ندیدید این چیزا رو ,همون موقع من به مطلبی نیاز داشتم که متاسفانه بسته بود …
اما در کل من از همه شما زحمت کشا ممنونم , اگه صحبتی هم میشه بخاطر پیشرفت سایته و بس … 😆 😆

لقمان آوند

خواهش می کنم
ممنون از شما بابت وقتی که برای ارائه دیدگاه گذاشتید
ایشالله که بتونیم روز به روز بهتر شیم …

نیاز به لاگین

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