Slick.js不适用于Google Maps API中的infoBox.js

Question

我正在尝试在Google Maps API的infoBox.js（或默认的infoWindow）中实现轮播。 轮播由slick.js插件提供动力。

据我所知，我的代码看起来不错，因为控制台中没有错误。 我很难找到问题所在。

谁能提出解决方案？ 谢谢。 我的完整代码段如下，但这是我为主要组件（infoBox，slick.js，jQuery UI）订购代码的方式。

// Set infoBox Content
var boxText = document.createElement("div");
boxText.innerHTML =
    '<div class="stack">' +
    '<div class="boxes">' +
    '<h1>1</h1>' +
    '<div class="slider"></div>' +
    '</div>' +
    '<div class="boxes">' +
    '<h1>2</h1>' +
    '</div>' +
    '<div class="boxes">' +
    '<h1>3</h1>' +
    '</div>' +
    '</div>' +
    '</div>';

// Initialize slick.js plugin
$('.stack').slick({
    centerMode: true,
    centerPadding: '80px',
    arrows: false,
    variableWidth: true,
    dots: true,
    swipeToSlide: true,
    focusOnSelect: true
});

// Intialize jQuery UI Slider
$('.slider').slider({
    max: 100,
    min: 0,
    value: 95
});

// Open infoBox when marker is clicked
google.maps.event.addListener(marker, 'click', function () {
    infoBubble.open(map, marker);
});

 var boxText = document.createElement("div"); boxText.innerHTML = '<div class="stack">' + '<div class="boxes">' + '<h1>1</h1>' + '<div class="slider"></div>' + '</div>' + '<div class="boxes">' + '<h1>2</h1>' + '</div>' + '<div class="boxes">' + '<h1>3</h1>' + '</div>' + '</div>' + '</div>'; $('.stack').slick({ centerMode: true, centerPadding: '80px', arrows: false, variableWidth: true, dots: true, swipeToSlide: true, focusOnSelect: true }); $('.slider').slider({ max: 100, min: 0, value: 95 }); var myOptions = { content: boxText, disableAutoPan: false, alignBottom: true, pixelOffset: new google.maps.Size(-126, -48), zIndex: null, infoBoxClearance: new google.maps.Size(1, 1), isHidden: false, pane: "floatPane", enableEventPropagation: false }; infoBubble = new InfoBox(myOptions); function initialize() { var mapOptions = { zoom: 11, minZoom: 11, maxZoom: 15, disableDefaultUI: true, center: new google.maps.LatLng(51.0333246, -114.0581015) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({ map: map, draggable: true, position: new google.maps.LatLng(51.0333246, -114.0581015), visible: true }); google.maps.event.addListener(marker, 'click', function () { infoBubble.open(map, marker); }); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map-canvas { height: 100%; padding: 0; margin: 0; } .infoBox { height: 200px; width: 200px; background: #fff; padding: 1em; } .boxes { height: 250px; width: 175px; display: inline; margin: 1em; background: #ccc; text-align: center; font-weight: bold; display: table; border: 2px solid transparent; border-radius: 4px; } .slick-slide { text-align: center; cursor: pointer; transform: scale(0.9); } .slick-center { background: #fff; border: 2px solid #ccc; transition: all 0.5s; transform: scale(1); } h1 { display: table-cell; vertical-align: middle; text-align: center; height: 190px; padding: 0 78px; margin: 0 auto; } .slider { width: 120px; margin: 0 auto; } h2 { font-size: 0.850em; text-transform: uppercase; } a:link { color: #0266C8; text-decoration: none; } 

 <link href="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script> <script src="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script> <div id="map-canvas"></div> 

Answer 1

我为domready事件添加了一个addListenerOnce ，以将slick.js插件加载到infoWindow中：

google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
    $('.stack').slick({
        centerMode: true,
        centerPadding: '80px',
        arrows: false,
        variableWidth: true,
        dots: false,
        swipeToSlide: true,
        focusOnSelect: true
    });
});