标签2和标签3无法正确加载Google地图.如何创建刷新标签? [英] Google map is not load properly in tab 2 and tab 3. How to create refresh tabs?
问题描述
我有3个要在Google地图上显示的商店位置.我将其分为3个选项卡和3个Google地图.在第一个选项卡上运行正常.但是第二个选项卡和第三个选项卡未正确加载.没有选项卡，它工作正常.我发现某些标签页需要刷新的博客?我不知道该怎么做，但我尝试了并且出错了.有人可以帮我吗?谢谢
I have 3 shop location that I wanted to show in google map. I have separate it into 3 tab and 3 google map. It was working fine at the 1st tab. But the 2nd tab and 3rd tab is not load properly. It was working fine without the tabs. I found some blog that tabs require to refresh? I am not sure how to do so but i tried and getting error. Anyone can help me out ? Thanks
以下是我的标签代码:-
Here below is my tab code:-
<div class="tabbable" id="tabs-331065">
<div class="tab-content">
<div class="tab-pane active" id="panel-127823">
<p>
<div id="map-city" ></div>
</p>
</div>
<div class="tab-pane" id="panel-737549">
<p>
<div id="map-box"></div>
</p>
</div>
<div class="tab-pane" id="panel-737589">
<p>
<div id="map-forest"></div>
</p>
</div>
</div>
<ul class="nav nav-tabs" id="map-tabs">
<li class="active" id="map-tab1">
<a href="#panel-127823" role="tab" data-toggle="tab">CITY</a>
</li>
<li id ="map-tab2">
<a href="#panel-737549" role="tab" data-toggle="tab">BOX HILL</a>
</li>
<li id="map-tab3">
<a href="#panel-737589" role="tab" data-toggle="tab">FOREST HILL</a>
</li>
</ul>
</div>
Google地图功能:-
Google map function : -
<script>
function initialize() {
var myLatlng1 = new google.maps.LatLng(-37.8122172,144.965374);
var myLatlng2 = new google.maps.LatLng(-37.818535,145.12194);
var myLatlng3 = new google.maps.LatLng(-37.834697,145.165394);
var mapOptions1 = {
zoom: 17,
center: myLatlng1
}
var mapOptions2 = {
zoom: 17,
center: myLatlng2
}
var mapOptions3 = {
zoom: 17,
center: myLatlng3
}
var map1 = new google.maps.Map(document.getElementById('map-city'), mapOptions1);
var map2 = new google.maps.Map(document.getElementById('map-box'), mapOptions2);
var map3 = new google.maps.Map(document.getElementById('map-forest'), mapOptions3);
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map1,
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map2,
});
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map3,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
推荐答案
原因是因为创建地图时，选项卡2和选项卡3(例如，选项卡一个处于活动状态)不可见，因此它们的大小无法正确调整.
The reason is because the map is not visible for tab 2 and tab 3 (e.g. tab one is active) when you create them so they will not resize properly.
您需要做的是激活选项卡-您需要调用地图调整大小以重新绘制地图.然后将根据其容器调整大小.
What you need to do do is in activating a tab - You need to call map resize to let the map redraw. it will then resize based on its container.
当您在该标签的地图中激活十个标签或在函数中获取正确的地图时，请执行以下操作:
Do something like this when you activate a tab ten pass in the map for that tab or get the correct map in the function:
首先更改您的初始化函数，以免在其中声明地图:
First change your initialize function so you don't declare the maps inside it:
// declare your maps outside of the functions like this and remove
// your var where you create them.
var map1, map2,map3;
function initialize() {
var myLatlng1 = new google.maps.LatLng(-37.8122172,144.965374);
var myLatlng2 = new google.maps.LatLng(-37.818535,145.12194);
var myLatlng3 = new google.maps.LatLng(-37.834697,145.165394);
var mapOptions1 = {
zoom: 17,
center: myLatlng1
}
var mapOptions2 = {
zoom: 17,
center: myLatlng2
}
var mapOptions3 = {
zoom: 17,
center: myLatlng3
}
// Note I removed the var
map1 = new google.maps.Map(document.getElementById('map-city'), mapOptions1);
map2 = new google.maps.Map(document.getElementById('map-box'), mapOptions2);
map3 = new google.maps.Map(document.getElementById('map-forest'), mapOptions3);
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map1,
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map2,
});
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map3,
});
// attach the tab click handler
attachTabClick();
}
然后在准备就绪的文档上或在初始化功能的底部附加一个选项卡激活功能:
Then attach a tab activate function on document ready or at the bottom of your initialize function:
function attachTabClick()
{
$('.nav-tabs').bind('click', function (e)
{
// e.target is the link
// so use its parent to check which map to show
var tabId = e.target;
//check the ID and only call the resize you need -
if(tabId == 'panel-127823')
{
resizeMap(map1)
}
else if(tabId == 'panel-737549')
{
resizeMap(map2);
}
else if(tabId == 'panel-737589')
{
resizeMap(map3)
}
});
}
然后调用该函数以调整地图大小:
then call the function to resize the map:
function resizeMap(map)
{
setTimeout(function()
{
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
},50);
}
更新:
这是一个有效的小提琴: http://jsfiddle.net/loanburger/fzhgjfrb/
Here is a working fiddle: http://jsfiddle.net/loanburger/fzhgjfrb/
- 请注意，在调整大小之前，我添加了一点超时，因为我发现div需要时间才能正确显示.
- 第二，我正在为所有地图调用调整大小-您需要检查正确的ID，而仅调用将可见的地图调整大小.
这篇关于标签2和标签3无法正确加载Google地图.如何创建刷新标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
