لوکیشن - فراغیب

→ تفاوت با ویرایش قدیمی‌تر

دیداریویکی‌متن

نسخهٔ کنونی تا ‏۲۰ ژوئیهٔ ۲۰۲۶، ساعت ۰۷:۲۵

مسیریابی تماس

@@ خط ۱: / خط ۱: @@
-<html lang="fa" dir="rtl">
+<html>
-  <body>
-    <div style="position: relative; width: 100%; max-width: 1000px;">
-      <!--
-        ================================
-        فقط این 2 بخش را هنگام تغییر لوکیشن عوض کن
-        ================================
-) لینک نشان:
+<div style="width: 100%; max-width: 1000px; font-family: Tahoma, sans-serif;">
-           در href مختصات و زوم را عوض کن
+  <!-- نقشه اصلی -->
-           نمونه:
+  <div style="position: relative; border: 1px solid #ccc; border-radius: 12px; overflow: hidden;">
-           #cLAT-LNG-ZOOMz-0p
+    <div id="osm-map-container">
+    <iframe id="dynamic-map" width="100%" height="250" style="border: none; display: block;" loading="lazy"></iframe>
+</div>
-) لینک نقشه OpenStreetMap:
+<script>
-           - marker=LAT,LNG
+    // --- تنظیمات ساده برای شما ---
-           - bbox=minLng,minLat,maxLng,maxLat
+    const lat = 35.56192149566451; // عرض جغرافیایی
-      -->
+    const lon = 51.16101758605524; // طول جغرافیایی
+    const zoomLevel = 0.005;        // هرچه عدد کوچک‌تر باشد، زوم بیشتر است (مثلاً 0.002 برای زوم خیلی نزدیک)
-      <!-- این لینک با کلیک روی لایه شفاف باز می‌شود -->
+    // --- محاسبه خودکار محدوده (bbox) ---
-      <a
+    const minLon = lon - zoomLevel;
-        href="https://neshan.org/maps/places/19087e7434f593216155a7c6bde38efd#c26.68101622855383-61.66516381168245-22z-0p"
+    const minLat = lat - zoomLevel;
-        target="_blank"
+    const maxLon = lon + zoomLevel;
-        rel="noopener noreferrer"
+    const maxLat = lat + zoomLevel;
-        title="باز کردن در نشان"
-        style="
+    // --- ساخت آدرس نهایی ---
-          position: absolute;
+    const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${minLon},${minLat},${maxLon},${maxLat}&layer=mapnik&marker=${lat},${lon}`;
-          inset: 0;
-          z-index: 2;
+    // --- اعمال به iframe ---
-          display: block;
+    document.getElementById('dynamic-map').src = mapUrl;
-          text-decoration: none;
+</script>
-        "
-       >
+  </div>
-        <!--
-          این لایه شفاف است و باعث می‌شود کلیک روی کل نقشه،
-          لینک نشان را باز کند.
+<!--     35.56192388976645,51.16100266694792    --->
-        -->
+  <!-- دکمه‌های زیر نقشه -->
-        <span
+  <div style="display: flex; gap: 10px; margin-top: 15px;">
-          style="
+    <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;">
-            position: absolute;
+      مسیریابی
-            inset: 0;
+    </a>
-            background: transparent;
+    <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;">
-            cursor: pointer;
+       تماس
-          "
+    </a>
-        ></span>
+    <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;">
-      </a>
+      اشتراک‌گذاری
+    </button>
+  </div>
+</div>
-      <!-- نقشه -->
-      <iframe
-        width="100%"
-        height="600"
-        style="border:1px solid #ccc; border-radius:12px; display:block;"
-        loading="lazy"
-        src="https://www.openstreetmap.org/export/embed.html?bbox=61.56516381168245%2C26.62101622855383%2C61.76516381168245%2C26.74101622855383&layer=mapnik&marker=26.68101622855383%2C61.66516381168245">
-      </iframe>
-      <!-- دکمه/برچسب کمکی -->
-      <a
-        href="https://neshan.org/maps/places/19087e7434f593216155a7c6bde38efd#c26.68101622855383-61.66516381168245-22z-0p"
-        target="_blank"
-        rel="noopener noreferrer"
-        style="
-          position: absolute;
-          right: 12px;
-          top: 12px;
-          z-index: 3;
-          background: #fff;
-          color: #222;
-          border: 1px solid #ccc;
-          border-radius: 8px;
-          padding: 8px 12px;
-          font-family: sans-serif;
-          font-size: 14px;
-          text-decoration: none;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-        "
-      >
-        باز کردن در نشان
-      </a>
-    </div>
-  </body>
 </html>