所以我正在使用 jquery ui 中的选项卡小部件。我有 3 个选项卡:详细信息、住宿和 map 。当我点击详细信息和住宿时,它会显示我在那里写的文本。
当我单击 map 选项卡时,我希望显示谷歌地图。我编写了一个函数来执行此操作,但当用户单击“ map ”选项卡时它不会显示。
我已经加载了正确的 gmpas 插件,因为此代码可以在我的其他 html 页面上运行。 这是我的谷歌地图功能:
(function googleMaps(){
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(29.099332, -110.980656),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
});
这是我的标签:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">Accomodation</a></li>
<li><a href="#tabs-3">Map</a>
</li>
</ul>
<div id="tabs-1">
<p>some other text</p>
</div>
<div id="tabs-2">
<p>some text</p>
</div>
<div id="tabs-3">
<div id="map">
</div>
</div>
编辑=根据请求,我上传脚本标签,因为我的第三个选项卡默认打开,这是不可取的:
<script>
(function(){
var bootstrapButton = $.fn.button.noConflict();
$.fn.bootstrapBtn = bootstrapButton;
}());
$('a[href="#tabs-3"]').one("click", function () {
(function googleMaps(){
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(29.099332, -110.980656),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
document.getElementById("map").innerHTML = map;
$("#tabs-1").show()
})();
});
var slideshow = $(".pgwSlider1").pgwSlideshow({
transitionEffect: 'fading',
autoSlide: true
});
$(function() {
$( "#tabs" ).tabs();
});
</script>
我确实有其他插件,例如 pgwSlider。他们工作得很好。
最佳答案
使用这种方式:
$("a[href^='tabs']").one("click", function(){
initMaps();
});
因此,您的解决方案是单击“ map ”选项卡,您需要显示它,因此您只需为此添加一个事件处理程序即可:
$('a[href="#tabs-3"]').one("click", function () {
(function googleMaps(){
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(29.099332, -110.980656),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
})();
});
关于javascript - 单击选项卡时如何调用函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34454808/