javascript 地图有时仅出现在其 div 的左上角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8803323/
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
Map sometimes appears only on upper left corner of its div
提问by ronme
I'm using the Google Maps API v3 for javascript. On certain cases I only see the map on the upper left corner. To see, please try going to http://telofast.com/telofun/#stationRankingand then pressing on one of the many lines.
我正在使用Google Maps API v3 for javascript。在某些情况下，我只看到左上角的地图。要查看，请尝试访问http://telofast.com/telofun/#stationRanking，然后按多行之一。
回答by benni_mac_b
The map works when the browser is resized as the width and height are correctly set and the resize event is raised.
当浏览器调整大小时，地图工作，因为宽度和高度设置正确，并且引发了调整大小事件。
The quickest solution to your problem would be to call the resize method (below) after the javascript which reveals it. Maybe after showDiv('mapDiv');in showScoresAndCenterOn?
解决您的问题的最快方法是在显示它的 javascript 之后调用 resize 方法（如下）。也许在showDiv('mapDiv');进去之后showScoresAndCenterOn？
google.maps.event.trigger(map, 'resize');
回答by erin
To fix this you need to
要解决此问题，您需要
Resize the map
google.maps.event.trigger(map, 'resize');Recenter the map, where
myCenteris your lat, lng point.map.setCenter(myCenter);
调整地图大小
google.maps.event.trigger(map, 'resize');将地图居中，
myCenter您的 lat, lng 点在哪里。map.setCenter(myCenter);
It's a bit of a hack but it works.
这有点黑客，但它的工作原理。
回答by maksbd19
I had the same problem which kept me bothering for few days and today I found the solution and it worked!
我遇到了同样的问题，这让我困扰了几天，今天我找到了解决方案，并且奏效了！
In my case I used tabs to view different parts of my page. It wasn't jquery ui, I made it. In one tab i placed the map's code. When I clicked on the maps tab it showed me the map but broken one. Finally I figured out the problem and the solution.
就我而言，我使用选项卡来查看页面的不同部分。这不是 jquery ui，我做到了。在一个选项卡中，我放置了地图的代码。当我单击地图选项卡时，它向我显示了地图，但已损坏。最后我想出了问题和解决方案。
To hide my elements I used display:noneproperty any to reveal I used display:blockproperty. When google map tried to get the dimension of the container block it found 0 x 0because it was hidden. So the map showed as broken.
为了隐藏我的元素，我使用了display:none属性 any 来显示我使用的display:block属性。当谷歌地图试图获取它发现的容器块的尺寸时，0 x 0因为它被隐藏了。所以地图显示为损坏。
Then I changed my css for the map tab only to position:absolute;left:-99999px;instead of display:noneand used jqueryto add a class and remove when necessary with the properties above. Then the code started to work! My map was fixed.
然后我将地图选项卡的 css 更改为position:absolute;left:-99999px;而不是， display:none并用于jquery添加一个类，并在必要时使用上述属性删除。然后代码开始工作了！我的地图是固定的。
回答by Kalyani Sharavanan
set containar #Div width to 100%.. it's work for me.
将容器 #Div 宽度设置为 100% .. 这对我有用。
回答by user2188425
Perfect thanks , i turned into the same issue. And indeed when you put display:none this would give problems when trying to view google maps. I removed the display:none and changed it towards a position outside the screen, when clicking a button this position changes towards somewhere in the screen and my map is shown correctly
完美谢谢，我变成了同样的问题。事实上，当你放置 display:none 这会在尝试查看谷歌地图时出现问题。我删除了 display:none 并将其更改为屏幕外的位置，单击按钮时，此位置更改为屏幕中的某个位置，我的地图显示正确
