لوکیشن - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
| خط ۶: | خط ۴: | ||
<!-- نقشه اصلی --> | <!-- نقشه اصلی --> | ||
<div style="position: relative; border: 1px solid #ccc; border-radius: 12px; overflow: hidden;"> | <div style="position: relative; border: 1px solid #ccc; border-radius: 12px; overflow: hidden;"> | ||
<iframe | <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> | </div> | ||
<!-- 35.56192388976645,51.16100266694792 ---> | |||
<!-- دکمههای زیر نقشه --> | <!-- دکمههای زیر نقشه --> | ||
<div style="display: flex; gap: 10px; margin-top: 15px;"> | <div style="display: flex; gap: 10px; margin-top: 15px;"> | ||
<a href="https://neshan.org/maps/places/ | <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> | ||
<a href="tel: | <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> | </a> | ||