Google Maps: จะสร้าง InfoWindow แบบกำหนดเองได้อย่างไร?

Google Maps InfoWindow เริ่มต้นสำหรับเครื่องหมายบนแผนที่นั้นกลมมาก ฉันจะสร้าง InfoWindow แบบกำหนดเองที่มีมุมสี่เหลี่ยมได้อย่างไร

แก้ไขหลังจากออกล่าไปรอบ ๆ ดูเหมือนว่านี่จะเป็นตัวเลือกที่ดีที่สุด:

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

คุณสามารถดูรุ่นที่กำหนดเองของ InfoBubble นี้ที่ผมใช้ในการดำน้ำเซเว่น, เว็บไซต์สำหรับการดำน้ำลึกออนไลน์เข้าสู่ระบบการดำน้ำ ดูเหมือนว่า:

มีบางตัวอย่างเพิ่มเติมที่นี่ อย่างไรก็ตามพวกเขาดูไม่ดีเท่าตัวอย่างในภาพหน้าจอของคุณ

คุณสามารถแก้ไข 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 ใหม่หรือเพียงแค่เพิ่มองค์ประกอบใหม่

เล่นกับองค์ประกอบเพื่อให้ได้สิ่งที่คุณต้องการ ...

ฉันพบว่า InfoBox เหมาะสำหรับการจัดแต่งทรงผมขั้นสูง

InfoBox ทำงานเหมือนgoogle.maps.InfoWindowแต่รองรับคุณสมบัติเพิ่มเติมหลายประการสำหรับการจัดแต่งทรงผมขั้นสูง InfoBox สามารถใช้เป็นป้ายกำกับแผนที่ได้ กล่องข้อมูลยังยิงเหตุการณ์ที่เกิดขึ้นเช่นเดียวกับgoogle.maps.InfoWindow

รวมhttp://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.jsไว้ในหน้าของคุณ

การจัดรูปแบบ infowindow นั้นค่อนข้างตรงไปตรงมาด้วยจาวาสคริปต์วานิลลา ฉันใช้ข้อมูลบางส่วนจากเธรดนี้เมื่อเขียนสิ่งนี้ ฉันยังคำนึงถึงปัญหาที่อาจเกิดขึ้นกับ IE เวอร์ชันก่อนหน้านี้ด้วย (แม้ว่าฉันจะไม่ได้ทดสอบกับมันก็ตาม)

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';
  }
});

โค้ดจะสร้างหน้าต่างข้อมูลตามปกติ (ไม่จำเป็นต้องใช้ปลั๊กอินการวางซ้อนแบบกำหนดเองหรือโค้ดขนาดใหญ่) โดยใช้ div ที่มี id เพื่อเก็บเนื้อหา สิ่งนี้ทำให้เกิด hook ในระบบที่เราสามารถใช้เพื่อรับองค์ประกอบที่ถูกต้องเพื่อจัดการกับสไตล์ชีตภายนอกที่เรียบง่าย

มีชิ้นส่วนพิเศษอีกสองสามชิ้น (ซึ่งไม่จำเป็นต้องใช้อย่างเคร่งครัด) ซึ่งจัดการสิ่งต่างๆเช่นการใส่ตะขอเข้าไปใน div โดยมีภาพหน้าต่างข้อมูลปิดอยู่

ลูปสุดท้ายจะซ่อนทุกส่วนของลูกศรชี้ ฉันต้องการสิ่งนี้ด้วยตัวเองเพราะฉันต้องการให้มีความโปร่งใสบนหน้าต่างและลูกศรขวางทาง แน่นอนว่าด้วยการใช้เบ็ดการเปลี่ยนรหัสเพื่อแทนที่ภาพลูกศรด้วย png ที่คุณเลือกก็น่าจะค่อนข้างง่ายเช่นกัน

หากคุณต้องการเปลี่ยนเป็น jquery (ไม่รู้ว่าทำไมคุณถึงทำ) นั่นควรจะค่อนข้างง่าย

ฉันไม่ได้เป็นนักพัฒนาจาวาสคริปต์ดังนั้นยินดีต้อนรับความคิดความคิดเห็นคำติชม :)

ด้านล่างของรหัสอาจช่วยคุณได้

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

นี่คือบทความ < วิธีค้นหาที่อยู่หลายแห่งบนแผนที่ Google ด้วยการซูมที่สมบูรณ์แบบ > ที่ช่วยให้ฉันประสบความสำเร็จ คุณสามารถอ้างอิงเพื่อใช้งานลิงค์ JS Fiddle และตัวอย่างที่สมบูรณ์

ผมไม่แน่ใจว่าวิธี FWIX.com จะทำมันโดยเฉพาะ แต่ฉันเดิมพันพวกเขาจะใช้ภาพซ้อนทับที่กำหนดเอง

คุณสามารถใช้โค้ดด้านล่างเพื่อลบหน้าต่างเริ่มต้นสไตล์ หลังจากที่คุณสามารถใช้โค้ด HTML สำหรับ inforwindow:

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});

นี่คือโซลูชัน CSS ที่แท้จริงตามตัวอย่างหน้าต่างปัจจุบันใน 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

คุณยังสามารถต่อท้ายคลาส css ของคุณเองบนป๊อปอัพคอนเทนเนอร์ / แคนวาสหรือคุณต้องการได้อย่างไร Google Maps 3.7 ปัจจุบันมีป๊อปอัปที่มีสไตล์โดยองค์ประกอบผ้าใบซึ่งนำเสนอคอนเทนเนอร์ div ป๊อปอัปในโค้ด ดังนั้นที่ googlemaps 3.7 คุณสามารถเข้าสู่กระบวนการเรนเดอร์โดยเหตุการณ์ Domready ของป๊อปอัปดังนี้:

var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
  if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
    if (this.content.parentNode.parentNode.previousElementSibling) {
      this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
    }
  }
});

element.previousElementSibling ไม่อยู่ในที่ IE8- ดังนั้นหากคุณต้องการที่จะให้มันทำงานที่มันเป็นไปตามนี้

ตรวจสอบการอ้างอิง InfoWindow ล่าสุดสำหรับเหตุการณ์และอื่น ๆ ..

ฉันพบว่าสิ่งนี้สะอาดที่สุดในบางกรณี

ฉันคิดว่าคำตอบที่ดีที่สุดที่ฉันคิดขึ้นอยู่ที่นี่: https://codepen.io/sentrathis96/pen/yJPZGx

ฉันไม่สามารถรับเครดิตสำหรับสิ่งนี้ฉันแยกสิ่งนี้จากผู้ใช้ codepen รายอื่นเพื่อแก้ไขการพึ่งพา Google Maps เพื่อโหลดจริง

จดบันทึกการโทรไปที่:

InfoWindow() // constructor