خرائط Google مشكلة ارتفاع InfoWindow
-
05-07-2019 - |
سؤال
لقد كنت أبحث عن الشبكة عن حل.
مشكلتي هي أن ارتفاع نافذة المعلومات لا يتم حسابه بشكل صحيح. لا توجد صور هناك ، لذا فهي ليست مشكلة في تحميل الصورة لاحقًا ، ولا يُعرف الحجم عند إنشاء الفقاعة.
وأيضًا إذا قمت بملئه بحوالي 15 سطرًا ، فقد بدأ الحجم على ما يرام.
هذا ما أطعمه لـ InfoWindowhtml:
<div><h2><a href="">Some title</a></h2><dl><dt>Location:</dt><dd>london</dd><dt>Description</dt><dd><p>Example text </p></dd></dl><p><a href="">Read more...</a></p></div>
المحلول
لحل هذه المشكلة ، يمكنك ضبط العرض وارتفاع Div الرئيسي. إذا قمت بتعيين العرض فقط ، فسوف يعمل. إذا قمت بتعيين العرض والارتفاع والتدفق: سيحصل أيضًا على شريط تمرير في حالة وجود محتوى طويل جدًا.
ولكن في خرائط Google v3 يتم حل هذه المشكلة.
نصائح أخرى
واجهت نفس المشكلة ، لكنني اكتشفت أنني واجهت هذه المشكلة لأنني وضعت حشوة على .continfobubble في CSS ، ولا في معلمة الخيار. لذا، أقوم بإزالة الحشوة من CSS وقمت بتعيينها في المعلمة عندما أقوم بإنشاء الفقاعة في HTML (وليس .js بعد ولكن map.html), ، من هنا:
[...]
var ib = new InfoBubble({
//minHeight: 125,
minWidth: 220,
padding: 7,
borderColor: "#dedede",
borderRadius: 3,
pixelOffset: new google.maps.Size(-140, -110),
});
[...]
وحلت المشكلة. ربما لك أيضا.
أضف min-height
إلى عنصر فئة InfoWindow الخاص بك.
سيؤدي ذلك إلى حل المشكلة إذا كانت InfoWindows الخاصة بك بنفس الحجم.
إذا لم يكن الأمر كذلك ، أضف هذا السطر من jQuery إلى وظيفة النقر لـ InfoWindow:
//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');