آموزش ایجاد دکمه مسیریابی با استفاده از HTML و JavaScript

در دنیای امروز، استفاده از نقشه‌های آنلاین برای مسیریابی به یک ابزار ضروری در زندگی روزمره تبدیل شده است. در این مقاله، ما شما را با فرآیند ایجاد یک دکمه ساده..

انتشار: , زمان مطالعه: 3 دقیقه
آموزش ایجاد دکمه مسیریابی با استفاده از HTML و JavaScript
دسته بندی: برنامه نویسی تعداد بازدید: 251

آموزش ایجاد دکمه مسیریابی با استفاده از HTML و JavaScript

در دنیای امروز، استفاده از نقشه‌های آنلاین برای مسیریابی به یک ابزار ضروری در زندگی روزمره تبدیل شده است. در این مقاله، ما شما را با فرآیند ایجاد یک دکمه ساده HTML همراهی می‌کنیم که با کلیک بر روی آن، صفحه‌ای جدید در مرورگر باز می‌شود و کاربر به موقعیت مشخصی در نقشه گوگل هدایت می‌شود. در این مثال، مقصد تهران را برای نمونه انتخاب کرده‌ایم. اما شما می‌توانید این کد را برای هر موقعیت جغرافیایی دیگری تنظیم کنید.

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

مرحله ۱: آماده‌سازی فایل HTML

ابتدا، یک فایل HTML جدید ایجاد کنید و کدهای زیر را در آن قرار دهید:

<!DOCTYPE html>
<!-- Programmer Ebrahim Shafiei (EbraSha) --> 
<html>
<head>
    <title>Open Google Maps</title>
</head>
<body>
    <button onclick="openGoogleMaps()">Open Google Maps</button>

    <script>
        function openGoogleMaps() {
            // Define coordinates for Tehran
            var destinationLatitude = 35.6892;  // Latitude for Tehran
            var destinationLongitude = 51.3890; // Longitude for Tehran

            // Create URL for Google Maps with specific parameters
            var googleMapsUrl = `https://www.google.com/maps/dir/?api=1&travelmode=driving&dir_action=navigate&destination=${destinationLatitude},${destinationLongitude}`;

            // Open Google Maps in a new window
            window.open(googleMapsUrl, '_blank');
        }
    </script>
</body>
</html>

مرحله ۲: شرح کد

  • تابع openGoogleMaps: این تابع مسئول باز کردن نقشه گوگل با مختصات مشخص شده است.
  • مختصات: در این کد، مختصات عرض و طول جغرافیایی برای تهران تعیین شده‌اند. شما می‌توانید این مقادیر را تغییر دهید تا به مکان دیگری هدایت شوید.
  • URL نقشه گوگل: URL مشخصی ساخته می‌شود که حاوی اطلاعات مورد نیاز برای مسیریابی است. پارامتر dir_action=navigate امکان مسیریابی مستقیم به مقصد را فراهم می‌کند.

مرحله ۳: استفاده و تنظیمات

این کد را می‌توانید در هر پروژه وبی که نیاز به امکان مسیریابی دارد، به کار ببرید. با تغییر دادن مختصات، می‌توانید این دکمه را برای هر مقصد دیگری نیز تنظیم کنید. این یک راه ساده و موثر برای افزودن امکانات مسیریابی به وب‌سایت‌ها است.

امیدواریم که این آموزش برای شما مفید بوده باشد و بتوانید با استفاده از این دانش در پروژه‌های خود مسیریابی ساده و کارآمدی را ایجاد کنید.

دیدگاه های مربوط به این مقاله (برای ارسال دیدگاه در سایت حتما باید عضو باشید و پروفایل کاربری شما تکمیل شده باشد)