[Javascript] خرائط Google: كيفية إنشاء InfoWindow مخصص؟



Answers

يمكنك تعديل كامل InfoWindow باستخدام jquery وحده ...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

هنا سيكون العنصر <p> بمثابة خطاف في InfoWindow الفعلي. بمجرد تنشيط domready ، سيصبح العنصر نشطًا ويمكن الوصول إليه باستخدام javascript / jquery ، مثل $('#hook').parent().parent().parent().parent() .

التعليمات البرمجية أدناه فقط بتعيين حدود 2 بكسل حول InfoWindow.

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

يمكنك فعل أي شيء مثل إعداد فئة CSS جديدة أو إضافة عنصر جديد فقط.

العب مع العناصر للحصول على ما تحتاجه ...

Question

تعد خرائط Google Maps الافتراضية InfoWindow لعلامة مخطط مستديرة للغاية. كيف يمكنني إنشاء InfoWindow مخصصة مع الزوايا المربعة؟




أعتقد أن أفضل إجابة جئت بها هنا: https://codepen.io/sentrathis96/pen/yJPZGx

لا يمكنني الاعتماد على هذا ، قمت بتشبيك هذا من مستخدم codepen آخر لإصلاح تبعية خرائط google لتحميل فعليًا

دوّن الدعوة إلى:

InfoWindow() // constructor



لست متأكدًا من كيفية قيام FWIX.com بذلك على وجه التحديد ، لكنني أرهن أنهم يستخدمون Custom Overlays .




في ما يلي حل CSS خالص يستند إلى مثال infowindow الحالي على google:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

#map *{
  overflow: visible;
}
#content{
  display: block;
  position: absolute;
  bottom: -8px;
  left: -20px;
  background-color: white;
  z-index: 10001;
}

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




تصميم infowindow هو واضح إلى حد ما مع javascript الفانيليا. لقد استخدمت بعض المعلومات من هذا الموضوع عند كتابة هذا. كما أنني أخذت في الاعتبار المشاكل المحتملة مع الإصدارات السابقة من أي (على الرغم من أنني لم تختبرها معهم).

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

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

هناك زوجين من القطع الإضافية (التي لا توجد حاجة ماسة لها) والتي تتعامل مع أشياء مثل إعطاء خطاف في div مع صورة النافذة وثيقة وثيقة في ذلك.

الحلقة النهائية تخفي كل القطع لسهم المؤشر. كنت بحاجة لهذا بنفسي لأنني أردت الحصول على شفافية على الانحناء والسهم في الطريق. وبالطبع ، مع وجود الخطاف ، يجب أن يكون تغيير الرمز لاستبدال صورة السهم بنوع ملف png من اختيارك بسيطًا جدًا.

إذا كنت ترغب في تغييره إلى jquery (لا توجد فكرة لماذا ستفعل) ، فيجب أن يكون ذلك بسيطًا إلى حد ما.

أنا لست عادة مطور جافا سكريبت لذلك أي أفكار وتعليقات وانتقادات نرحب :)






Links