jQuery Google Maps v3 在左上角部分加载，调整大小事件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17059816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps v3 load partially on top left corner, resize event does not work
提问by Ramprasad
Google Maps V3 loaded partially on top left corner. I tried the following methods:
谷歌地图 V3 部分加载在左上角。我尝试了以下方法：
Add
google.maps.event.trigger(map, 'resize');after map initialization.Rearrange
<script>tag in index file
google.maps.event.trigger(map, 'resize');地图初始化后添加。重新排列
<script>索引文件中的标签
But none works for me. How to solve this issue. Is there an official bug and solution to this issue?
但没有一个对我有用。如何解决这个问题。此问题是否有官方错误和解决方案？
index.html
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from LayoutIt!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap css files -->
<link href="stylesheets/bootstrap.min.css" rel="stylesheet">
<link href="stylesheets/bootstrap-responsive.min.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div id="contentbar">
<div id="dashboard-content" class="contentbar-main">
Some Content
</div>
<div id="summary-content" class="contentbar-main" style="display:none;">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span7" id="sidebarid">
<p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
</div>
<div class="span5" id="contentbarid">
<div class="row-fluid">
<div class="span12">
<input type="button" value="toggle" id="toggle-button">
<div id="map-canvas" style="width:100%;height:400px;"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery scripts -->
<script type="text/javascript" src="javascripts/jquery.min.js"></script>
<!-- Bootstrap script -->
<script type="text/javascript" src="javascripts/bootstrap.min.js"></script>
<!-- My basic script file-->
<script type="text/javascript" src="javascripts/my-script.js"></script>
<!--Google Map server url-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAngjBDpe4ep15u5dvlnbZbn1ghA5uISZY&sensor=false"></script>
</body>
</html>
my-script.js
我的脚本.js
var map;
$(document).ready(function(){
google.maps.visualRefresh = true;
initializeMap();
});
//Load Map in Summary Tab
function initializeMap() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
google.maps.event.trigger(map, 'resize');
}
回答by Ian Devlin
I've had this issue before too and fixed it by waiting for the map's 'idle' state (i.e. when it's finished) and then calling the resize:
我以前也遇到过这个问题，并通过等待地图的“空闲”状态（即完成时）然后调用调整大小来修复它：
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
回答by Michael Geary
I think your map is hidden at the time you create it: there's a display:noneon the #summary-contentdiv that the map is nested inside.
我认为您的地图在您创建它时是隐藏的：divdisplay:none上有一个#summary-content地图嵌套在其中。
You should try triggering the resizeevent afterthat div is made visible instead of during initialization.
您应该尝试在div 可见后而不是在初始化期间触发resize事件。
In fact, you could probably just call your initializeMap()function event at the time that div is made visible, instead of calling it in your .ready()function.
事实上，您可能只initializeMap()在 div 可见时调用函数事件，而不是在.ready()函数中调用它。
回答by Adam
I had the issue with all maps other than the first loaded map showing in the top left corner with the rest of the map having not loaded and therefore showing in grey.
除了第一张加载的地图显示在左上角之外，我遇到了所有地图的问题，地图的其余部分没有加载，因此显示为灰色。
Was scratching my head for some time but managed to solve it with:
抓了一段时间，但设法解决了它：
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(latLng);
});
It was a easy solution thanks to Ian Devlin and d.raev and just wanted to say thanks and share the code that solved it for me seeing as I can't comment or vote up yet!
感谢 Ian Devlin 和 d.raev，这是一个简单的解决方案，我只想说谢谢并分享为我解决它的代码，因为我还不能发表评论或投票！
I called that after creating the map with:
我在创建地图后调用了它：
map = new google.maps.Map(document.getElementById("business-location-"+business_username), map_options);
so if you've got this problem put it right under where you create your maptoo!
所以如果你有这个问题，把它放在你创建地图的地方！
回答by Maksym Kozlenko
Google Maps does not play well with Bootstrap. Try adding the following CSS to your map element
谷歌地图不能很好地与 Bootstrap 配合使用。尝试将以下 CSS 添加到您的地图元素
#map-canvas img {
max-width: none;
}
回答by d.raev
I just got a similar issue (map loaded in container expanded with animation)
我刚刚遇到了类似的问题（加载在容器中的地图用动画展开）
As @Ian Devlin part of the solution is, is to trigger resizeevent after all is visible.
The second part is to fix the center (as it is usually in the top left corner):
正如@Ian Devlin 解决方案的一部分一样，是resize在所有可见之后触发事件。
第二部分是固定中心（因为它通常在左上角）：
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(center); // var center = new google.maps.LatLng(50,3,10.9);
});
回答by GSof
I know this is a relatively old question now however, I have come across this issue today and found a resolution. It may (may not) be helpful to people, however if you require to show the Google Maps onclick then if you call your initilise()function within this event and delay it as seen from my code below.
我现在知道这是一个相对较旧的问题，但是我今天遇到了这个问题并找到了解决方案。它可能（可能不是）对人们有帮助，但是如果您需要在点击时显示 Google 地图，那么如果您在此事件中调用您的initilise()函数并延迟它，如下面的代码所示。
Google Maps API function - initialise();
谷歌地图 API 函数 - 初始化（）；
var locationLondon = new google.maps.LatLng(51.508742, -0.120850);
var map;
function initialise(location){
//Object to define properties
var mapProp = {
center: locationLondon,
zoom: 15,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
//Map Marker
var marker = new google.maps.Marker({
position: locationLondon,
map: map
});
marker.setMap(map);
};
My jQuery event call
我的 jQuery 事件调用
$( document ).ready(function(){
$( '#maps-container' ).hide();
$( '#card-1 .fa-info-circle' ).click(function(event){
event.stopPropagation();
$( '#maps-container' ).delay( 1000 ).fadeIn( 'slow' );
$( '#map-load' ).delay( 1000 ).fadeOut( 'slow' );
setTimeout(initialise, 1000);
});
});
- '#map-load'is a preloader screen for the map's initial load
- '#maps-container'is the container for the Google Map (#googleMap)
- '#map-load'是地图初始加载的预加载屏幕
- '#maps-container'是 Google 地图 (#googleMap) 的容器
回答by Tony
Use pageshow event with the shown format. It worked for me.
使用具有显示格式的 pageshow 事件。它对我有用。
$(document).on('pageshow', '[data-role="page"]#mapPage' , function(){
initialize();
});
$(document).on('pageshow', '[data-role="page"]#mapPage' , function(){
initialize(); });
