Hộp thông tin V3 API Google Maps sử dụng jQuery fadeIn và fadeOut

Question

Tôi đã tìm kiếm trên web cao và thấp và không thể tìm thấy hướng dẫn hoặc ví dụ về cách sử dụng jQuery để làm mờ một InfoBox/InfoWindow trong Google Maps chứ không phải nội dung của hộp thực tế/cửa sổ. Đây là mã của tôi, tôi không chắc mình đang làm gì sai, nhưng cái gì cũng có vẻ không đúng.

google.maps.event.addListener(marker, 'mouseover', function() { 
    ib.setContent(html); 
    ib.open(map, marker); 
    ib.setValues({type: "point", id: 2}) 

    var idName = marker.get("id"); //I was trying to the id's of the elements here 
    var boxName = ib.get("id"); //to use in my jQuery 

    jQuery(idName).mouseover(function() { 
     jQuery(boxName).fadeIn('slow', function() { 
    // Animation complete 
    }); 
    }); 

}); 

Answer 1

Đó là thực sự có thể fadeIn các hộp thông tin, bạn phải ghi đè lên các chức năng vẽ trong infobox.js nộp như thế này

var oldDraw = ib.draw; 
ib.draw = function() { 
    oldDraw.apply(this); 
    jQuery(ib.div_).hide(); 
    jQuery(ib.div_).fadeIn('slow'); 
} 

Answer 2

Tôi không nghĩ điều này là có thể vì Google không cung cấp tùy chọn hoạt ảnh.

Cố gắng lấy phần tử Dom cũng sẽ không hoạt động. Biến ib là một lớp google.maps.InfoWindow không phải là một phần tử DOM. Vì không có giao diện công cộng để lấy phần tử DOM cho cửa sổ thông tin, bạn sẽ không thể tự truy cập vào phần này.

Nếu bạn sử dụng console.log(ib.get("id")) bạn sẽ thấy ID không được xác định.

Answer 3

Tôi đang sử dụng marker google thư viện tiện ích với nhãn (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html)

Rất dễ sử dụng jquery trên nhãn.

google.maps.event.addListener(marker, "mouseover", function (e) { 
    //console.log(this); this.label.labelDiv_.style.display = 'block'; 
    $(this.label.labelDiv_).fadeIn(); 
}); 

google.maps.event.addListener(marker, "mouseout", function (e) { 
    //this.label.labelDiv_.style.display = 'none'; 
    $(this.label.labelDiv_).fadeOut(); 
}); 

Answer 4

Nếu bạn ghi đè phương pháp vẽ và áp dụng mờ dần, hoạt ảnh sẽ được phát ngay cả khi bạn kéo hoặc phóng to/thu nhỏ trong bản đồ.Nếu bạn không muốn điều đó xảy ra, bạn có thể áp dụng các fadeIn trong phương pháp xử lý domready.Trong trường hợp đó mờ dần có hiệu lực sẽ đến chỉ khi bạn infowindow được mở ra.

google.maps.event.addListener(ib, 'domready', function() { 
      jQuery(ib).hide().fadeIn('slow'); 
}) 

;

Answer 5

tôi đã thử một nội dung tương tự cho một trang web. đây là mã của tôi. (gm-api-v3)

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

function iwFadeIn() { 
    infowindow.open(map, marker); 
    var iw_container = $(".gm-style-iw").parent(); 
    iw_container.stop().hide(); 
    iw_container.fadeIn(1000); 
} 

Answer 6

Hiệu ứng fadeOut có thể đạt được bằng cách thêm lớp và setTimeout. Hãy để tôi giải thích.

Ví dụ:

$('.close-el') 
     .on('click', function(e) { 
      e.stopPropagation(); 
      $(infobox.div_).addClass('is-closing'); 
      setTimeout(function() { 
       infobox.close(); 
      }, 700); 
    }); 

khi bạn thêm lớp CSS, và, sau khi kết thúc quá trình chuyển đổi css bạn đóng các thông tin hộp

và CSS (sass) (lớp .infoBox được dành riêng)

.infoBox { 
    &.is-closing { 
     transition: transform 400ms, opacity 400ms; 

     transform: translate3d(0, 30px, 0); 
     opacity: 0; 
    } 
}