عرض الموقع من خلال إرسال قيم خط الطول والعرض لكل row

Programmer Programmers · 8 فبراير

في جدول العرض أريد أن يتم عرض الخريطة من خلال إرسال قيم خط الطول والعرض عند النقر على زر فتح ال modal

    <td>
        <button type="button"  data-title="المنشأة" class="show-map-modal dropdown-item">
            <i class="fa fa-image text-secondary" style="font-size: 20px"></i>
        </button>
        @include('dashboard.admin.show_maps')
    </td>

ملف show_maps.js لفتح ال modal

document.querySelectorAll(".show-map-modal").forEach((item) => {
    item.addEventListener("click", (e) => {
        var lat = '{{ $tent->latitude }}';
        var long = '{{ $tent->longitude }}';
        function showMap(lat, long){
            var coord = { lat:lat, lng:long};

            map = new google.maps.Map(document.getElementById("map"), {
                center: coord,
                zoom: 8,
                scrollwheel: true,
            });
        }
        showMap(0, 0);
        $("#map_modal").modal("show");
    });
});

ملف show_maps.blade.php

<!-- Start Modal map -->
<div class="modal fade" id="map_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="map_modal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="delete_header">عرض محتوى الموقع</h4>
                <i type="reset" data-bs-dismiss="modal" aria-label="Close"
                    class="las las la-times text-danger scale5 cancel-modal"></i>
            </div>
            <div class="modal-body pb-4">
                <label class="form-label">الموقع</label>
                <input type="text" readonly="true" class="form-control" value="{{ $tent->location }}"></input>
                <div class="mb-3 col-md-12">
                    <div id="map" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Modal map -->

كل سجل ينبغي أن يتم عرض الخريطة الخاصة به

ياسر مسكين · 8 فبراير

أفهم أنك تريد أن يتم عرض الخريطة من خلال إرسال قيم خط الطول والعرض عند النقر على زر فتح ال modal،

لتحقيق ذلك، يمكنك تعديل ملف show_maps.js لتمرير قيم خط الطول والعرض عند النقر على زر "فتح ال modal" واستخدامها لعرض الخريطة داخل ال modal. بهذا الشكل:

document.querySelectorAll(".show-map-modal").forEach((item) => {
    item.addEventListener("click", (e) => {
        var lat = parseFloat(item.dataset.latitude); // الحصول على قيمة خط العرض
        var long = parseFloat(item.dataset.longitude); // الحصول على قيمة خط الطول

        function showMap(lat, long){
            var coord = { lat: lat, lng: long };

            map = new google.maps.Map(document.getElementById("map"), {
                center: coord,
                zoom: 8,
                scrollwheel: true,
            });
        }
        showMap(lat, long); // عرض الخريطة بالقيم المحددة
        $("#map_modal").modal("show");
    });
});

ثم، في جدول العرض، يجب عليك تحديد قيم خط الطول والعرض لكل صف وتمريرها كقيم لزر "فتح ال modal".

بهذه الطريقة المبينة:

<td>
    <button type="button" class="show-map-modal dropdown-item"
            data-latitude="{{ $tent->latitude }}"
            data-longitude="{{ $tent->longitude }}">
        <i class="fa fa-image text-secondary" style="font-size: 20px"></i>
    </button>
</td>

ويجب التأكد من أن $tent->latitude و $tent->longitude تحتوي على قيم خط الطول والعرض الصحيحة لكل صف ومع هذه التغييرات، سيتم تمرير القيم المحددة لخط الطول والعرض إلى وظيفة JavaScript، وستظهر الخريطة المتعلقة بتلك القيم داخل ال modal مباشرة.

محمد_عاطف · 8 فبراير

يمكنك استخدام خاصية ال data attribute فى الجافا سكريبت حيث يمكنك اضافة data attribute بالاسم الذى تريده لعنصر ال HTML ومن خلال الجافا سكريبت يمكنك قراءة هذه البيانات .

هنا فى الزر الخاص بفتح ال modal نقوم باضافة اثنين من ال data attribute و نقوم بتمرير القيم الخاصة بخطوط الطول وخطوط العرض .

<button type="button"  data-title="المنشأة" data-latitude="{{$latitude}}" data-longitude="{{$longitude}}" class="show-map-modal dropdown-item">
            <i class="fa fa-image text-secondary" style="font-size: 20px"></i>
</button>

وبواسطة الجافاسكريبت يمكننا قراءة هذه البيانات عن طريق خاصية ال dataset property ويكون مثل هذا

بتاريخ 24 دقائق مضت قال Programmer Programmers:
element.dataset.langitude;

اذا سنقوم بتغير هذا السطر فى ملف ال show_maps.js

بتاريخ 25 دقائق مضت قال Programmer Programmers:
showMap(0, 0);

الى هذا

showMap(element.dataset.latitude, element.dataset.longitude);

وسيعمل جيدا ان شاء الله

عرض الموقع من خلال إرسال قيم خط الطول والعرض لكل row

السؤال

Programmer Programmers

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

ياسر مسكين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد_عاطف

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية