Google Maps: Làm cách nào để tạo một InfoWindow tùy chỉnh?

Google Maps InfoWindow mặc định cho một điểm đánh dấu bản đồ rất tròn. Làm cách nào để tạo một InfoWindow tùy chỉnh với các góc vuông?

CHỈNH SỬA Sau khi tìm kiếm xung quanh, đây có vẻ là lựa chọn tốt nhất:

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

Bạn có thể xem phiên bản tùy chỉnh của InfoBubble này mà tôi đã sử dụng trên Dive Seven, một trang web để ghi nhật ký lặn biển trực tuyến . Nó trông như thế này:

Có một số ví dụ khác ở đây . Tuy nhiên, chúng chắc chắn không đẹp như ví dụ trong ảnh chụp màn hình của bạn.

Bạn có thể sửa đổi toàn bộ InfoWindow chỉ bằng jquery ...

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

Tại đây, phần tử <p> sẽ hoạt động như một móc nối vào InfoWindow thực tế. Khi phần tử đã được kích hoạt, phần tử sẽ trở nên hoạt động và có thể truy cập bằng cách sử dụng javascript / jquery, chẳng hạn như $('#hook').parent().parent().parent().parent().

Đoạn mã dưới đây chỉ đặt đường viền 2 pixel xung quanh 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');
        }
    }
});

Bạn có thể làm bất cứ điều gì như thiết lập một lớp CSS mới hoặc chỉ thêm một phần tử mới.

Chơi xung quanh với các yếu tố để có được những gì bạn cần ...

Tôi thấy InfoBox hoàn hảo để tạo kiểu nâng cao.

InfoBox hoạt động giống như google.maps.InfoWindow , nhưng nó hỗ trợ một số thuộc tính bổ sung để tạo kiểu nâng cao. Một InfoBox cũng có thể được sử dụng làm nhãn bản đồ. InfoBox cũng kích hoạt các sự kiện tương tự như google.maps.InfoWindow .

Bao gồm http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js trong trang của bạn

Tạo kiểu cho infowindow khá đơn giản với javascript vani. Tôi đã sử dụng một số thông tin từ chủ đề này khi viết bài này. Tôi cũng đã tính đến các vấn đề có thể xảy ra với các phiên bản trước đó của ie (mặc dù tôi chưa thử nghiệm nó với chúng).

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

Mã tạo infowindow như bình thường (không cần plugin, lớp phủ tùy chỉnh hoặc mã lớn), sử dụng div có id để giữ nội dung. Điều này cung cấp một hook trong hệ thống mà chúng ta có thể sử dụng để lấy các phần tử chính xác để thao tác với một biểu định kiểu đơn giản bên ngoài.

Có một vài phần bổ sung (không hoàn toàn cần thiết) xử lý những thứ như đưa một cái móc vào div với hình ảnh cửa sổ thông tin đóng trong đó.

Vòng lặp cuối cùng ẩn tất cả các phần của mũi tên con trỏ. Bản thân tôi cần điều này vì tôi muốn minh bạch trên infowindow và mũi tên đã cản đường. Tất nhiên, với hook, việc thay đổi mã để thay thế hình ảnh mũi tên bằng png mà bạn chọn cũng khá đơn giản.

Nếu bạn muốn thay đổi nó thành jquery (không biết tại sao bạn lại làm như vậy) thì điều đó sẽ khá đơn giản.

Tôi thường không phải là nhà phát triển javascript nên mọi suy nghĩ, nhận xét, phê bình đều được hoan nghênh :)

Đoạn mã dưới đây có thể giúp bạn.

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

Đây là một bài viết < Cách định vị nhiều địa chỉ trên google maps với khả năng thu phóng hoàn hảo > đã giúp tôi đạt được điều này. Bạn có thể tham khảo nó để biết liên kết JS Fiddle hoạt động và ví dụ đầy đủ.

Tôi không chắc FWIX.com đang làm việc đó cụ thể như thế nào, nhưng tôi cá rằng họ đang sử dụng Lớp phủ tùy chỉnh .

Bạn có thể sử dụng mã bên dưới để loại bỏ thông tin phong cách mặc định. Sau khi bạn có thể sử dụng mã HTML cho 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
});

Đây là một giải pháp CSS thuần túy dựa trên ví dụ infowindow hiện tại trên 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;
}

Đây là một giải pháp nhanh sẽ hoạt động tốt cho các cửa sổ thông tin nhỏ. Đừng quên bình chọn nếu nó có ích: P

Bạn thậm chí có thể nối thêm lớp css của riêng mình trên vùng chứa / canvas bật lên hoặc theo cách bạn muốn. Các bản đồ google hiện tại 3.7 có các cửa sổ bật lên được tạo kiểu bằng phần tử canvas sẽ thêm vào vùng chứa div cửa sổ bật lên trong mã. Vì vậy, tại googlemaps 3.7 Bạn có thể tham gia vào quá trình kết xuất bằng sự kiện đã có sẵn của cửa sổ bật lên như sau:

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 không có trong IE8- vì vậy nếu bạn muốn làm cho nó hoạt động tại đó, hãy làm theo điều này .

kiểm tra tham chiếu InfoWindow mới nhất để biết các sự kiện và hơn thế nữa ..

Tôi thấy điều này sạch sẽ nhất trong một số trường hợp.

Tôi nghĩ câu trả lời hay nhất mà tôi nghĩ ra là ở đây: https://codepen.io/sentrathis96/pen/yJPZGx

Tôi không thể ghi nhận điều này, tôi đã chuyển cái này từ một người dùng codepen khác để sửa lỗi phụ thuộc vào bản đồ google để thực sự tải

Ghi lại cuộc gọi tới:

InfoWindow() // constructor