Javascript 谷歌地图未在js选项卡中加载
我正在尝试使用js制作选项卡,以便在站点上获得更多数据 请浏览: 顶部的两个选项卡(“Billeder”和“kort”)使用js创建 如果我进入名为“kort”的点击,谷歌地图将不会完全加载——但是如果我右键单击并使用firefox选择“Inspect Element(Q)”,地图会突然加载 此外,地图未居中。在特定位置-该位置位于左上角 您可能会注意到tab div下面有一个空格。这与js选项卡中使用的代码完全相同。如果我在js选项卡中注释掉,空白的方块将完美工作。因此,不知何故,js选项卡与js谷歌地图的组合似乎不起作用。是否会出现这种情况?如果是,如何解决 下面我展示了初始化谷歌地图和点击页面的代码:Javascript 谷歌地图未在js选项卡中加载,javascript,html,google-maps,dom,Javascript,Html,Google Maps,Dom,我正在尝试使用js制作选项卡,以便在站点上获得更多数据 请浏览: 顶部的两个选项卡(“Billeder”和“kort”)使用js创建 如果我进入名为“kort”的点击,谷歌地图将不会完全加载——但是如果我右键单击并使用firefox选择“Inspect Element(Q)”,地图会突然加载 此外,地图未居中。在特定位置-该位置位于左上角 您可能会注意到tab div下面有一个空格。这与js选项卡中使用的代码完全相同。如果我在js选项卡中注释掉,空白的方块将完美工作。因此,不知何故,js选项卡与
if($('body.single-konferencested').length > 0)
{
tabs();
}
if($('body.single-konferencested').length > 0)
{
$(document).ready(function() {
function initialize() {
var myLatlng = new google.maps.LatLng(place_lat,place_lng);
var mapOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
clickable : true
});
var pinIcon = new google.maps.MarkerImage(
"http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker.png",
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(24, 40)
);
marker.setIcon(pinIcon);
var content_string = '<div id="gmap_info">'+
'<div id="siteNotice">'+
'</div>'+
'<h3 id="firstHeading" class="firstHeading">'+place_title+'</h3>'+
'<div id="bodyContent">'+
'<p>'+place_address+'<br />'+place_city_zip+'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: content_string
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
}
if($('body.single-konferencested')。长度>0)
{
tabs();
}
if($('body.single-konferencested')。长度>0)
{
$(文档).ready(函数(){
函数初始化(){
var mylatng=new google.maps.LatLng(place\u lat,place\u lng);
变量映射选项={
缩放:9,
中心:myLatlng,
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map(document.getElementById('gmap'),mapOptions);
var marker=new google.maps.marker({
职位:myLatlng,
地图:地图,
可点击:正确
});
var pinIcon=new google.maps.MarkerImage(
"http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker.png",
null,/*大小在运行时确定*/
null,/*原点为0,0*/
null,/*定位点是缩放图像的底部中心*/
新谷歌。地图。大小(24,40)
);
marker.setIcon(pinIcon);
变量内容_字符串=“”+
''+
''+
''+位置\标题+''中+
''+
“”+place\u address+”
“+place\u city\u zip+”+
'';
var infowindow=new google.maps.infowindow({
content:content\u字符串
});
google.maps.event.addListener(标记'click',函数(){
信息窗口。打开(地图、标记);
});
}
google.maps.event.addDomListener(窗口“加载”,初始化);
});
}
以下是显示“Kort”选项卡的DOM的html:
科特
测试
致意
Patrick如果地图所在的div在页面加载中不可见,则地图将无法正确加载。一旦div进入视图,就应该触发resize
google.maps.event.trigger(map, 'resize');
您应该将其绑定到“地图”选项卡的第一次单击
看起来地图当前已从第二个选项卡中注释掉。如果您可以取消注释它,它将更容易帮助您更具体
编辑:
要绑定函数一次,请尝试以下操作:
var tab = jQuery('ul#tabs li')[1]
jQuery(tab).one('click', function(){
google.maps.event.trigger(map, 'resize');
});
为了调整大小,您需要从init函数访问map变量。
如果在选项卡上放置一个类,那么选择正确的选项卡也会更容易。这将是更可靠的比第二个李在标签ul
编辑2:
尝试在初始化代码中添加click函数。类似于下面的内容
var mapOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);
//add the code here, after the map variable has been instantiated
var tab = jQuery('ul#tabs li')[1]
jQuery(tab).one('click', function(){
google.maps.event.trigger(map, 'resize');
//fire a center event after the resize, this is also useful
// if bound to a window resize
map.setCenter(myLatlng)
});
//end of new code
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
clickable : true
});
通过单击Tab键重新初始化Google地图,可以很容易地解决这个问题
$('#kort').click(function(e) {
initialize();
resetMap(map);
});
这个简单的解决方案已经在这里找到了-嘿,谢谢你的帮助。当然,我很抱歉,我以为我又活过来了。现在应该可以再次看到它,并且可以查看错误。嗨,沃尔夫,我现在已经尝试了你建议的解决方案,但没有任何运气。我已经在这里发布了标签的全部代码,根据您的建议,在showTab()中调整谷歌地图的大小-它在代码片段中被注释掉。您建议我尝试什么?您无权访问showTab函数作用域中的map变量。我建议将编辑中的代码添加到初始化函数中。我将在上面发布一篇编辑文章来演示一下wollfer,这很管用!然而,我仍然有一个问题集中地图。如果您看到以下代码,我尝试使用您的代码修复居中:居中在加载时不起作用,但如果页面刷新,则地图居中。这怎么可能呢?在你发射了一个re大小后,试着发射一个re中心。因为地图是在一个较小的空间中初始化的,所以它将自己集中在该区域上。一旦你调整了它的大小,直到你告诉它,它才知道你想要它重新居中。因此,在与前面相同的单击函数中使用以下内容:map.setCenter(myLatlng)。我已经编辑了我的帖子来显示新的代码。
$('#kort').click(function(e) {
initialize();
resetMap(map);
});