[Jquery] كيفية التعامل مع خريطة جوجل داخل من قسم مخفي (صورة محدثة)


Answers

كنت أواجه نفس المشكلة واكتشفت أنه عند عرض div ، اتصل بـ google.maps.event.trigger(map, 'resize'); ويبدو أن حل المشكلة بالنسبة لي.

Question

لدي صفحة وخريطة جوجل هو داخل شعبة مخفية في البداية. ثم أقوم بعرض div بعد النقر فوق ارتباط ولكن يظهر أعلى يسار الخريطة فقط.

حاولت تشغيل هذا الكود بعد النقر:

    map0.onResize();

أو:

  google.maps.event.trigger(map0, 'resize')

أيه أفكار. هنا صورة لما أراه بعد إظهار div بالخريطة المخفية فيه.




أعتقد أن السؤال الأصلي هو مع الخريطة التي يتم تنشيطها في قسم مخفي من الصفحة. لقد قمت بحل مشكلة مشابهة عن طريق تغيير حجم الخريطة في القسم المخفي عند إعداد الوثيقة ، بعد أن يتم تهيئتها ، بغض النظر عن حالة العرض الخاصة بها. في حالتي ، لديّ خريطتين ، أحدهما معروض والآخر مخفي عند تهيئته ، ولا أريد وضع خريطة مبدئية في كل مرة يظهر فيها. إنها وظيفة قديمة ، لكن آمل أن يساعد أي شخص يبحث.




كان الحل الخاص بي:

CSS:

.map {
   height: 400px;
   border: #ccc solid 1px;
}

مسج:

$('.map').width(555); // width of map canvas



استخدم هذا الخط من الرموز عندما تريد إظهار الخريطة.

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);



كان لدي خريطة جوجل داخل علامة التبويب Bootstrap ، والتي لم تكن تعرض بشكل صحيح. كان هذا هو الإصلاح الخاص بي.

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});



تمامًا كما أشار John Doppelmann و HoffZ ، ضع كل الشفرات معًا كما يلي في div الخاص بك الذي يعرض الحدث أو الحدث onclick:

setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

عمل بمثالية معي




حلّي بسيط للغاية وفعال:

HTML

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>


CSS

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}


مسج

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map



أول منشور. كان قسم "googleMap" الخاص بي ضمن قسم الحاوية مع {display: none} حتى يتم النقر فوق علامة التبويب. كان نفس المشكلة كما OP. هذا العمل بالنسبة لي:

google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));

ضع هذا الرمز داخل ونهاية رمزك حيث يتم النقر فوق علامة التبويب حاوية الحاوية وتكشف عن قسمك المخفي. الشيء المهم هو أن div الحاوية الخاص بك يجب أن يكون مرئيًا قبل التهيئة يمكن أن يسمى.

لقد جربت عددًا من الحلول المقترحة هنا وصفحات أخرى ولم تعمل معي. أخبرني إذا كان هذا يناسبك. شكر.




عند إظهار الخريطة ، أقوم بتأشير العنوان الجغرافي ثم قم بتعيين مركز الخرائط. google.maps.event.trigger(map, 'resize'); لا يعمل بالنسبة لي.

اضطررت لاستخدام map.setZoom(14);

الرمز أدناه:

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });



كان لدي نفس المشكلة ، لم يكن يعمل google.maps.event.trigger(map, 'resize') بالنسبة لي.

ما فعلته هو وضع جهاز توقيت لتحديث الخريطة بعد وضع div ...

//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

لا أعرف ما إذا كانت الطريقة الأكثر ملاءمة للقيام بذلك ولكنها تعمل!




من الممكن أيضًا تشغيل حدث تغيير حجم النافذة الأصلية فقط.

ستعيد خرائط Google تحميل نفسها تلقائيًا:

window.dispatchEvent(new Event('resize'));