谷歌地图加载部分点击隐藏的标签 [英] Google Map loading partially on click on the hidden tab
本文介绍了谷歌地图加载部分点击隐藏的标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用2个标签，首先显示列表和另一个显示地图。
加载第一次页面时默认显示1个选项卡，点击第二个选项卡地图，但是当我点击列表选项卡并再次点击地图选项卡地图加载部分。
以下是我的JAVASCRIPT代码：
$（document）.on（'click'，＃ load-map-view，function（）{
locateStores（）;
$（＃store-list-view）。hide（）;
$（＃store-list -view）。removeClass（'disabled'）;
$（＃store-map-view）。show（）;
$（＃store-map-view ）.addClass（'disabled'）;
}）;
函数locateStores（）{
var mapContent;
var map = new google.maps.Map（document.getElementById（store-map-view），{
center：new google.maps.LatLng（47.6145，-122.3418），
mapTypeId：google.maps.MapTypeId.ROADMAP，
zoom：13
}）;
var markers = [];
$（＃store-list-view .listed-shop）。each（function（）{
markers.push（{
lat：$（this）.attr（'data -lat'），
lng：$（this）.attr（'data-lan'），
name：$ .trim（$（this）.find（'div.shop-name'） .text（））
}）;
}）;
for（index in marker）
addMarker（markers [index]）;
function addMarker（data）{
var marker = new google.maps.Marker（{
position：new google.maps.LatLng（data.lat， data.lng），
map：map，
title：data.name
}）;
$ b var infobox = new InfoBox（{
content：document.getElementById（infobox），
disableAutoPan：false，
maxWidth：150，
pixelOffset：new google.maps.Size（-140，-10），
zIndex：null，
boxStyle：{
background：url（'http：// google-maps-utility -library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif'）no-repeat，
opacity：0.80，
width：400px//280px
}，
closeBoxMargin：12px 4px 2px 2px，
closeBoxURL：http://www.google.com/intl/zh-CN/mapfiles/close.gif，
infoBoxClearance：new google.maps.Size（1，1）
}）;
google.maps.event.trigger（map，'resize'）;
map.setZoom（map.getZoom（））;
google.maps.event.addListener（marker，'click'，function（）{
$（。infoBox）。fadeOut（300）;
infobox.open （map，this）;
map.panTo（new google.maps.LatLng（47.6145，-122.3418））;
}）;
}
var bounds = new google.maps.LatLngBounds（）;
for（index in markers）{
var data = markers [index];
bounds.extend（new google.maps.LatLng（data.lat，data.lng））;
}
map.fitBounds（bounds）;
var pin = new google.maps.MVCObject（）;
函数openInfoWindow（marker）{
title.innerHTML = marker.getTitle（）;
pin.set（position，marker.getPosition（））;
infowindow.open（map，marker）;
}
}
我尝试了几种解决方案，如：
添加此代码
google.maps.event.trigger（map，resize）;
以及其他许多解决方案，但仍然无法加载页面。
有人可以帮我解决这个问题吗？
解决方案
我已经找到了我遇到的问题。
google.maps.event.trigger（map，resize）;
解决我的问题的方法是：
如果您使用隐藏div的地图。
然后显示div，在显示div后加载地图，并使用给定的代码调整它。
var map; //全球化你的地图变量
//然后进行必要的加载
$（document）.on（'click'，＃load-map-view，function（）{
$（＃store-list-view）。hide（）;
$（＃store-list-view）。removeClass（'disabled'）;
showStores（）;
google.maps.event.trigger（map，resize）;
$（＃store-map-view）。show（）;
$（ ＃store-map-view）。addClass（'disabled'）;
}）;
I'm using 2 tabs, first for showing list and another showing map. When the first time page is loaded 1 tab is shown by default and on click of second tab map is shown, but when i click list tab and again click map tab map loading partially.
Here is my JAVASCRIPT code:
$(document).on('click', "#load-map-view", function() {
locateStores();
$("#store-list-view").hide();
$("#store-list-view").removeClass('disabled');
$("#store-map-view").show();
$("#store-map-view").addClass('disabled');
});
function locateStores() {
var mapContent;
var map = new google.maps.Map(document.getElementById("store-map-view"), {
center: new google.maps.LatLng(47.6145, -122.3418),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var markers = [];
$("#store-list-view .listed-shop").each(function() {
markers.push({
lat: $(this).attr('data-lat'),
lng: $(this).attr('data-lan'),
name: $.trim($(this).find('div.shop-name').text())
});
});
for (index in markers)
addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
var infobox = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, -10),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.80,
width: "400px"//"280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
google.maps.event.addListener(marker, 'click', function() {
$(".infoBox").fadeOut(300);
infobox.open(map, this);
map.panTo(new google.maps.LatLng(47.6145, -122.3418));
});
}
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
var pin = new google.maps.MVCObject();
function openInfoWindow(marker) {
title.innerHTML = marker.getTitle();
pin.set("position", marker.getPosition());
infowindow.open(map, marker);
}
}
I have tried several solutions like : adding this code
google.maps.event.trigger(map, "resize");
and many other solutions, but still the page still isn't loading.
can someone help me out in this?
解决方案
I have figured out the problem I was getting.
I was adding below code on wrong position:
google.maps.event.trigger(map, "resize");
The solution to my problem is:
If you are using map for hidden div. Declare map variable as global.
Then show the div first, load the map after div is shown and resize it using the code given.
var map; //globalize your map variable
// Then do the necessary loading
$(document).on('click', "#load-map-view", function() {
$("#store-list-view").hide();
$("#store-list-view").removeClass('disabled');
locateStores();
google.maps.event.trigger(map, "resize");
$("#store-map-view").show();
$("#store-map-view").addClass('disabled');
});
这篇关于谷歌地图加载部分点击隐藏的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
