دانلود نقشه ایران با فرمت SVG و بصورت ریسپانسیو
نقشه ایران (استان + دریاها + دریاچه ها + جزیره ها) با فرمت SVG و بصورت کاملا ریسپانسیو آماده استفاده می باشد.
سازگاری با جی کوئری ورژن 1.6.4 و بالاتر
توجه: این فایل (نقشه ایران) بصورت رایگان عرضه شده و استفاده از آن در پروژه های مختلف (تجاری، دانشجویی یا ...) آزاد و رایگان است ولی استفاده از آن برای کسب درآمد مستقیم (فروش و...) غیرمجاز میباشد.
تصویر:
iran_map.PNG
دانلود ورژن 1.0.0:
iran_map.zip
دانلود ورژن 1.1.0:
IranMap-v.1.1.0.zip
آخرین ویرایش به وسیله qartalonline : شنبه 14 تیر 1393 در 16:49 عصر دلیل: اضافه شدن جزییات
ورژن 1.1.0 اضافه شد.
تغییرات:
- رفع باگ نمایش عنوان استان ها در tooltip
- اضافه شدن دو رویداد click
- بهینه سازی
مشتری برای تورهای مسافرتی دادم میتونم این این نقشه استفاده کنم تو سایتشون ؟نوشته شده توسط qartalonline
من در برخی از امتحاناتم مردود شدم اما دوستم تمام درسهایش را با موفقیت گذراند.
اکنون او یک مهندس در شرکت مایکروسافت است
و من فقط مالک مایکروسافت هستم ........ بیل گیتس
بله، هرجا نیاز داشتید میتونید استفاده کنید.
متن توجه برای آن دسته از افراد سودجویی هستش که قصد فروش اسکریپت رایگان رو دارن.
خواستم فقط شما راضی باشید
من در برخی از امتحاناتم مردود شدم اما دوستم تمام درسهایش را با موفقیت گذراند.
اکنون او یک مهندس در شرکت مایکروسافت است
و من فقط مالک مایکروسافت هستم ........ بیل گیتس
با اجازتون یه کپی هم تواین تاپیک گذاشتم
https://barnamenevis.org/showthread.p...A7%D9%84%D8%A8
من در برخی از امتحاناتم مردود شدم اما دوستم تمام درسهایش را با موفقیت گذراند.
اکنون او یک مهندس در شرکت مایکروسافت است
و من فقط مالک مایکروسافت هستم ........ بیل گیتس
سلام
ممنون واقعا کاربردی بود
هیچ راهی نیست که جای رنگ عکس یزاریم؟
یک پترن مثلا ریپیت شه؟
منظورم جای رنگ های fill هست
بطور مستقیم که نمیشه برای fill از تصویر استفاده کرد.
ولی میشه برای کل نقشه پس زمینه شبیه سازی کرد.
با سلام
ممنون از مطلب خوبتون...
چندتا سوال داشتم:
اول اینکه اگر بخوایم نام هر استان رو روی بخش مربوطش بنویسیم چیکار باید بکنیم؟
دوم اینکه مثل سایت آسیاتک اگر بخوایم وقتی روی استان کلیک کرد شهرهاش نمایش داده بشه و بعدش هم نمایندگی های اون شهرهاو... چیکار باید کنیم؟چون الان فایلی که شما قرار دادید تنها نقشه خالیه و این قابلیت ها رو نداره برای اضافه کردن این قابلیت ها اگر امکانش هست راهنمایی کنید و اگرم آموزشی میشناسید معرفی کنید..
با تشکر فراوان
برای نمایش نام استانها بر روی نقشه باید با جی کوئری کار کنید به اینصورت که برای هر کدوم از استانها یه تگ مثل span ایجاد میشه که نام استانها توش نوشته بشه بعد position تگ رو برابر absolute قرار بدید و با jQuery موقعیت استانهای نقشه رو بگیرید و براساس اون به تگ span ویژگی left و top بدید.
برای سوال دومتون اگه توجه کنید سایت آسیاتک هم از همین نقشه استفاده میکنه شما اگه از ورژن 1.1.0 استفاده کنید دو تا تابع در این رابطه قرار داده شده که با کلیک بر روی استانها (چه بر روی لیست چه بر روی نقشه) اون تابع نام استان رو به شما تحویل میده که میتوند اون رو پردازش کنید و با ajax نام شهرستانهای اون استان رو از دیتابیس بخونید و...
آموزشی برای این مورد سراغ دارید؟؟
صبر کنید چند روز بعد تو ورژن جدید این قابلیت رو اضافه میکنم.
خیلی لطف میکنید من منتظرم..
با تشکر فراوان
البته اگه لینک آموزشی هم دارید، بدید
متاسفانه لینک آموزشی ندارم.
در واقع با تابع زیر میشه این کار رو کرد منتها اشکالاتی داره که باید برطرف بشه در صورتیکه برطرف شد ورژن جدید رو میزارم.
var showTitleOnMap = $('#IranMap .show-title-on-map');
if (showTitleOnMap.length === 1) {
var provinceTitle, svgProvincePathClass, provinceTop, provinceLeft;
var svgProvincePath = $('#IranMap svg g.province path');
for (var i = 0; i < svgProvincePath.length; i++) {
svgProvincePathClass = svgProvincePath.eq(i).attr('class');
provinceTop = svgProvincePath.eq(i).offset().top - 20;
provinceLeft = svgProvincePath.eq(i).offset().left-70;
provinceTitle = $('#IranMap .list .province li.' + svgProvincePathClass + ' a').html();
showTitleOnMap.append('<i style="top:'+provinceTop+'px;left:'+provinceLeft+' px">' + provinceTitle + '</i>');
}
}
سلام آقا دست شما درد نکنه بابت این کد بسیار عالی،
فقط من می خواستم بدونم اگر بخوایم وقتی که موس روی هر استان میره، نام اون استان رو توی یک div نشون بده باید چکار کرد؟
به عبارت دیگه یک div تعریف بکنیم با آی دی province و نام استان ها فقط توی اون div نمایش داده بشه نه توی اون جدولی که کنارش هست
مثلا اون div رو بالای نقشه تعریف کنیم و تمام نام ها اونجا نمایش داده بشه.
ممنون.
با کد زیر میتونید نمایش بدید فقط توجه کنید که اینجا نام فارسی استان ها از لیست کناری خونده میشه باید اون مخفی کنید یا اینکه از دیتابیس بخونید و بریزید تو آرایه بعد تو div مورد نظر نمایش بدید.
$('#IranMap .map .province path').hover(function() {
var province = $(this).attr('class');
var provinceName = $('#IranMap .list>ul>li>ul>li.' + province + ' a').html();
if (provinceName) {
alert(provinceName);
}
});
خیلی ممنون از پاسخ خوب و سریع شما،
فقط مشکل اصلی من هم این هست که بجای اینکه اسم استان ها در جداول باشه و برای پیدا کردنشون به لیست مراجعه کنه، چطور میتونه از آرایه اسامی رو پیدا کنه و نشون بده
ممنون میشم کد پیدا کردن اسم های فارسی از داخل آرایه رو هم بگید.
با سلام
آقا من وقتی لیست استان ها رو از این کنار بر میدارم دیگه Tooltipe روی نقشه کار نمیکنه... میخواستم ببینم چیکار کنم که با برداشتن لیست های کنار برای Tooltip مشکلی ایجاد نشه؟
ممنون میشم راهنمایی کنید.
برای خوندن موقعیت استان ها روی نقشه میشه بیشتر توضیح بدید که دقیقا چیکار باید کنم... موقعیت استان هارو چجوری اختصاص بدم و...
ممنون میشم ازتون
دوستان هیچ کس نیست راهنمایی کنه؟؟
صبر کنید کدش رو قرار میدم.
برای این کار باید از آرایه ها استفاده کنید.
یه مشکلی که وجود داره برای خوندن موقعیت استانها تفاوت بسیار زیاد در طول و عرض آنهاست که نیاز به محاسبات کمی پیچیده داره. موقعیت هر استان رو میتونید با کد زیر بدست بیارید:
$('#IranMap svg g.province path').offset();
سلام
نقشه استان ها هم هست؟ میشه بسازید؟
خیر نقشه استانها نیست و فقط نقشه ایران هستش. ساختنش زمان زیادی میبره که فعلا وقت نمیکنم.
با تشکر از دوست عزیز qartalonline
دوستان چند تا سوال رو پرسیده بودن که تقریبا بدون جواب مانده بودند :
1 - برای استفاده از پترن یا تصویر در زمینه پدها بصورت زیر عمل کنید
الف : میشه یه پترن را با دستورات SVG تعریف کنید و بعد بعنوان Fill ازش استفاده کنید
مثلا :
<defs>
<pattern id="Pattern01" width="20" height="20" patternUnits="userSpaceOnUse">
<rect width="20" height="20" fill="#FFFFFF" stroke="#000000" stroke-width="0.5"/>
</pattern>
</defs>
ب : حالت دوم هم نگاشت تصویر واقعی بعنوان پترنه که بصورت زیر میشه
<defs>
<pattern id="Pattern01" width="20" height="20" patternUnits="userSpaceOnUse">
<image xlink:href="image/minus.gif" x="0" y="0" width="11" height="11"/>
</pattern>
</defs>
دقت کنید که من لینک تصویری با نام minus.gif را از پوشه image داده ام و شما به دلخواه خود آنرا عوض کنید
در هر دو تعریف فوق از یک ID استفاده کردیم که می تونیم با ادرس دادن به آن زمینه پد مورد نظر رو تغییر بدیم, مثلا در فایل Css بصورت زیر میشه
#IranMap .map .province path{
fill:url(#Pattern01);
}
یا برای هر پد خاص در تعریفش Fill رو بصورت دستی وارد می کنیم Fill="url(#Pattern01)"
در هر دو حالت بالا به محل تعریف پترن خودمون لینک دادیم (هر دو حالت رو تست کردم و جواب داد)
2 - برای حذف لیست های سمت چپ در فایل نمونه (لیست استان ها) اما حفظ تول تیپ عنوان استان ها بهترین راه استفاده از خاصیت data- است که در Html5 معرفی شد. میشه خاصیتی مثل data-name برای هر پد ایجاد کرد و با گرفتن مقدار آن در زمان رفتن موس بر روی هر پد مقدار آن را در tooltip نشان داد.
مثلا :
<path data-name="تهران" class="tehran" d="..." />
حالا برای گرفتن مقدار این خاصیت در کدهای جاوا اسکریپت بصورت زیر عمل می کنیم (اولین تابع در فایل جاوااسکریپت رو بصورت زیر تغییر بدهید)
var pathname = $(this).attr('data-name');
حالا مقدار گرفته شده از خاصیت data-name هر پد رو به تول تیپ می دهیم تا نمایش بدهد
$('#IranMap .show-title').html(pathname).css({'display': 'block'});
قسمت های اضافی کدهای جاوا اسکریپت رو هم خذف کنید تا اضافی نباشند.
الان نیازی به لیست های جانبی برای گرفتن عنوان استان ها نداریم و می تونیم فقط نقشه خودمون را با اصلاحیات جدید به کاربر نشان دهیم
دوستانی که تغییری در نقشه میدین یا امکاناتی رو اضافه میکنید در صورت تمایل فایل کلی رو در اینجا منتشر کنید تا دیگران هم استفاده کنند.
Great ! ________________________________________
سلام
راهی نیست که نقشه تو Internet Explorer هم نمایش داده بشه ؟!
البته سایت آسایا تک یه عکس از نقشه رو زیر نقشه اصلی قرار داده که تو Internet Explorer نمایش میده ولی روش جالبی نیست چون کامل روهم نیوفتاده!!!
خیر امکان استفاده در ie ورژن 8 و پایین تر وجود نداره. برای این مرورگرها میتونید با ترفندهای مختلف نقشه رو نشون ندید و فقط نام استانها رو نمایش بدید.
مرورگرهایی که از svg پشتیبانی میکنن رو میتونید اینجا ببینید.
برای اطلاعات بیشتر لینک زیر رو ببینید:
http://css-tricks.com/svg-fallbacks/
خیلی خیلی ممنون بابت این فایل
سلام
دوستان نمیدونم این مشکل برای شما هم وجود داره یا نه
وقتی برای لینک ها یک آدرس (مثلا سایت گوگل) مشخص میکنید با کلیک کردن بر روی لینک به آدرس مشخص شده نمیره؟؟؟؟
دقیقا مشکلتون کجاست میخواید با کلیک بر روی نقشه به لینک خاصی بره؟
عالی.
فقط برای ساختش از Illustrator استفاده کردید؟
به تنهایی نه ولی از Illustrator هم استفاده کردم.
تشکر از زحمتتون.
با توجه به اینکه این قسمت در بیشتر سایت ها استفاده میشه.
میشه یه مثال بزنید که چطور از دیتابیس نام استانها را باید خوند؟
سلام این کار با زبان های سمت سرور صورت می گیره
اگه براتون مقدوره میتونید با ASP.net یک مثال ساده بزنید
تشکر ولی اگه بخوایم لینک بشه باید چیکار کنیم؟
اگه استانها رو میخواید لینک کنید هر path رو داخل تگ a قرار بدید یا با جاوا اسکریپت کار کنید.
نمونه اش تو سایت http://post.ir هم هست،که از لینک استفاده کرده.
سلام و درود
تشکر از لطفی که کردید و این اسکریپت پر کاربرد رو رایگان در اختیار همه قرار دادین.
چطور میشه اسم خلیج فارس رو روی نقشه به طور ثابت گذاشت؟
ممنون.
سلام مرسی از مطلب خوبتون واقعا کاربردیه فقط من یه سوال دارم اینکه اگه بخوام سایز نقشه بزرگ باشه و با کم کردن لیست شهرها سایزش کوچیک نشه باید چکار کنم ممنون میشم جوابم رو بدید
قوانین ایجاد تاپیک در تالار
