Slick.js不适用于Google Maps API中的infoBox.js
Slick.js Does Not Work with infoBox.js in the Google Maps API
我正试图在Google Maps API的infoBox.js(或默认的infoWindow)中实现一个旋转木马。转盘由slick.js插件提供动力。
据我所知,我的代码似乎很好,因为控制台中没有错误。我很难找到这个问题。
有人能提出解决方案吗?非常感谢。下面是我的完整代码片段,但这是我为主要组件(infoBox、slick.js、jQueryUI)排序代码的方式。
// 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>
我为domready
事件添加了一个addListenerOnce
,以在infoWindow:中加载slick.js插件
google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
$('.stack').slick({
centerMode: true,
centerPadding: '80px',
arrows: false,
variableWidth: true,
dots: false,
swipeToSlide: true,
focusOnSelect: true
});
});
相关文章:
- 谷歌地图JS API+JSON-多个标记没有显示
- 引用单个表的多列 - Sails JS API 模型
- 如何使用YouTube js API在同一个嵌入式播放器中背靠背播放多个视频
- 解析推送通知-如何从REST或JS API跟踪打开
- "现代的“;在Google Maps JS API v3上使用字母标记
- 使用 API 注册创建节点.js API 框架
- Google Maps JS API v3 - Add Map Types
- HERE 映射 JS API v3 集群提供程序挂起,添加许多数据点
- MapQuest JS API-通过密切关注点列表来获取方向
- 如何使用地点ID从Google Places JS API检索地点详细信息
- 授权客户端JS API调用Google'的具有现有访问令牌的gap库
- Google Map JS API-加载地图分幅,但所有图像(标记、缩放控制等)都不加载;t负载2分钟
- 谷歌地图JS API-如何使用fitBounds响应地图
- node.js-express.js API删除http后处理程序
- Google Maps JS API equivalent of URL
- Gerrit-如何通过JS API扩展UI
- Node.js API设计和路由处理
- 用谷歌地图js api v3制作路线动画
- 谷歌地图 JS API v3 - 简单的多重标记 v2
- 谷歌地图 JS API v3:使用 containsLocation() 获取圆圈标记不起作用 - 为什么