لوکیشن - فراغیب
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| (۲ نسخهٔ میانی ویرایش شده توسط ۲ کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
< | |||
<div style="width: 100%; max-width: 1000px; font-family: Tahoma, sans-serif;"> | |||
<!-- نقشه اصلی --> | |||
style="border:1px solid #ccc; border-radius:12px;" | <div style="position: relative; border: 1px solid #ccc; border-radius: 12px; overflow: hidden;"> | ||
<div id="osm-map-container"> | |||
<iframe id="dynamic-map" width="100%" height="250" style="border: none; display: block;" loading="lazy"></iframe> | |||
</div> | |||
< | |||
</ | <script> | ||
// --- تنظیمات ساده برای شما --- | |||
const lat = 35.56192149566451; // عرض جغرافیایی | |||
const lon = 51.16101758605524; // طول جغرافیایی | |||
const zoomLevel = 0.005; // هرچه عدد کوچکتر باشد، زوم بیشتر است (مثلاً 0.002 برای زوم خیلی نزدیک) | |||
// --- محاسبه خودکار محدوده (bbox) --- | |||
const minLon = lon - zoomLevel; | |||
const minLat = lat - zoomLevel; | |||
const maxLon = lon + zoomLevel; | |||
const maxLat = lat + zoomLevel; | |||
// --- ساخت آدرس نهایی --- | |||
const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${minLon},${minLat},${maxLon},${maxLat}&layer=mapnik&marker=${lat},${lon}`; | |||
// --- اعمال به iframe --- | |||
document.getElementById('dynamic-map').src = mapUrl; | |||
</script> | |||
</div> | |||
<!-- 35.56192388976645,51.16100266694792 ---> | |||
<!-- دکمههای زیر نقشه --> | |||
<div style="display: flex; gap: 10px; margin-top: 15px;"> | |||
<a href="https://neshan.org/maps/places/35.56192388976645" target="_blank" style="flex: 1; padding: 12px; text-align: center; background: #e3f2fd; color: #1976d2; border-radius: 8px; text-decoration: none; font-weight: bold; border: 1px solid #bbdefb;"> | |||
مسیریابی | |||
</a> | |||
<a href="tel:09304963449" style="flex: 1; padding: 12px; text-align: center; background: #e8f5e9; color: #388e3c; border-radius: 8px; text-decoration: none; font-weight: bold; border: 1px solid #c8e6c9;"> | |||
تماس | |||
</a> | |||
<button onclick="navigator.clipboard.writeText(window.location.href); alert('لینک کپی شد!');" style="flex: 1; padding: 12px; text-align: center; background: #fff3e0; color: #f57c00; border-radius: 8px; text-decoration: none; font-weight: bold; border: 1px solid #ffe0b2; cursor: pointer;"> | |||
اشتراکگذاری | |||
</button> | |||
</div> | |||
</div> | |||
</html> | </html> | ||