我知道这是本网站和其他地方报告的常见问题,例如
但我无法解决我的问题。
因此,我首先构建了一个响应式网站,并且我正在尝试让自适应 map 解决方案发挥作用,即移动视口(viewport)获得静态 Google map 图像,对于非移动视口(viewport)获得完整的 Google map API,这一切都有当视口(viewport)调整大小时不仅在页面加载时更新自身。基于此:http://codepen.io/bradfrost/pen/tLxAs .
我正在使用this library 。
我仅在需要时(非移动视口(viewport))通过 jQuery 的 $.getScript
以及库 setup()
和 有条件地加载 Maps API defer() 函数。
因此,在我使用 jQuery hide()
和 show()
的每个视口(viewport)处只有正确的 map 渲染,因此 API map 不会完全显示加载自身(仅 1 个图 block ),如果页面以非移动视口大小加载,它确实可以正常加载,当您将移动视口(viewport)大小调整回非移动视口(viewport)大小时,就像 show()
方法启动。其他一切正常。
这是我的代码:
HTML
<div class="map">
<div class="map__static">
<img src="http://maps.google.com/maps/api/staticmap?center=-33.867487,151.20699&zoom=15&markers=-33.867487,151.20699&size=650x405&sensor=false">
</div>
</div>
由于网站首先构建移动设备,因此默认加载静态 map 图像。
JS
var mapContainer = $('.map'),
mapStaticContainer = $('.map__static');
mapDynamicContainer = $('<div class="map__dynamic"/>');
// Start Enquire library
enquire.register('screen and (min-width: 40em)', {
deferSetup: true,
setup: function setup() {
mapContainer.prepend(mapDynamicContainer);
mapDynamicContainer.load('/includes/scripts/adaptive-google-map.php', function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyAywjPmf5WvWh_cIn35NwtIk-gYuwu1I2Q&sensor=false&callback=initialize');
});
},
// Not mobile size viewport
match: function() {
mapStaticContainer.hide();
mapDynamicContainer.show();
},
// Mobile size viewport
unmatch: function() {
mapStaticContainer.show();
mapDynamicContainer.hide();
}
}, true).listen();
这是 '/includes/scripts/adaptive-google-map.php' 的内容,它是通过 jQuery load()
通过 AJAX 加载的。
<div id="map_canvas"></div>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-33.867487,151.20699);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP
});
var contentString =
'<div class="infowindow">'+
'<div>'+
'<p class="flush"><strong>SALES OFFICE:</strong><br>1/16 M. 5<br>Sydney<br>NSW, 83110.</p>'
'</div>'+
'</div>'
;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// Center Google Maps (V3) on browser resize (http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive)
var center;
function calculateCenter() {
center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
</script>
这解决了问题:
mapDynamicContainer.show(function () {
setTimeout(function() {
initialize();
}, 100);
})
但抛出一个 JS 错误:Uncaught ReferenceError:initialize is not Define
。 ppl 建议的另一个常见修复方法。正在应用此: google.maps.event.trigger(map, 'resize');
但当我将其放在 mapDynamicContainer.show();
之后时>match() 函数我收到此 JS 错误:Uncaught ReferenceError: google is not Defined
。
运气不太好:(
最佳答案
好的,所以基本上“调整大小”仍然是你的答案。
我刚刚将您的匹配修改为这段代码:
match: function() {
mapStaticContainer.hide();
mapDynamicContainer.show();
if( typeof(map) != 'undefined'){
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}
},
并且它正在工作。 不知道你的代码中是否还有其他内容。我使用了您提供的html、js和adaptive-google-map.php的内容,它工作没有任何问题。
关于jquery - 谷歌地图在隐藏的 div 中不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14931819/