javascript 谷歌地图只显示部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4358582/
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 Map shows only partially
提问by JochenJung
The Google Map I have is only beeing rendered partially and is centered to the wrong point (it should center to the marker). See below:
我拥有的谷歌地图只是部分渲染，并且以错误的点为中心（它应该以标记为中心）。见下文：
Now to add a little more detail:
现在添加更多细节：
- It works fine in IE
- It looks like in the screenshot in FF and Chrome.
- In Chrome ist works as soon, as I open the developer console
- 它在 IE 中运行良好
- 它看起来像 FF 和 Chrome 的屏幕截图。
- 在 Chrome 中，当我打开开发者控制台时，它就可以工作了
Especially the last point is the one I'm wondering most about. I guess opening the developer console re-executes some JavaScript.
特别是最后一点是我最想知道的一点。我猜打开开发者控制台会重新执行一些 JavaScript。
So: Can I call a function to re-execute JavaScript, the way the developer console does?
那么：我可以像开发者控制台那样调用一个函数来重新执行 JavaScript 吗？
This is the code:
这是代码：
<script type="text/javascript">
{literal}
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map")); //, { size : {width:600,height:600} }
map.addControl(new GLargeMapControl3D());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(51.17689812200107, 9.84375), 5);
map.checkResize();
var geocoder = new GClientGeocoder();
function showPoint(lat, lon) {
if (lat != "" && lon != "") {
var point = new GLatLng(lat, lon);
map.setCenter(point, 10);
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
// map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
var newPoint = marker.getLatLng();
$('#lat').val(newPoint.lat());
$('#lon').val(newPoint.lng());
// marker.openInfoWindowHtml("Neue Koordinaten Lat: "+ newPoint.lat() +" Lon: "+ newPoint.lng());
});
map.addOverlay(marker);
}
}
{/literal}showPoint("{$gmap_lat}", "{$gmap_lon}");{literal}
}
}
{/literal}
This is where I put the div:
这是我放置 div 的地方：
<fieldset style="-moz-border-radius: 1em; -webkit-border-radius: 1em;">
<legend>Karte</legend>
<div id="map" title="Lage von '{$name}'"><br>Die Karte wird geladen...<br><br>Hinweis: Damit dies funktioniert müssen Sie in Ihrem Browser JavaScript aktivieren</div>
Falls sich der Marker nicht auf der richtigen Position befinden sollte, bewegen Sie diesen mit Ihrer Maus auf die richtige Position.
<br>L?nge: <input type="text" id="lat" name="lat" value="{$gmap_lat}">
Breite: <input type="text" id="lon" name="lon" value="{$gmap_lon}">
</fieldset>
And on the div the following CSS rules apply:
在 div 上，以下 CSS 规则适用：
采纳答案by JochenJung
Found the issue. I was hiding the block, GMaps was in
发现问题。我在隐藏街区，GMaps 在
<div id="step2" style="display:none">
But it seems a block containing the map may not be hidden, when GMaps loads.
但是当 GMaps 加载时，似乎包含地图的块可能不会被隐藏。
So I changed it like this
所以我改成这样
<div id="step2">
and everything worked. But as I just like to show "step1" in the beginning, I do a
一切正常。但是因为我只是喜欢在开始时显示“step1”，所以我做了一个
$('#step2').hide();
once the map is loaded.
一旦地图加载。
It's realy strange behaviour of Chrome and FF, but I'm glad it works with this workaround. Thanks for your help.
Chrome 和 FF 的行为真的很奇怪，但我很高兴它适用于这种解决方法。谢谢你的帮助。
回答by Bronek
I've found that any hide and show operations which are performed on div with google map by using css 'display' property (or jQuery hide() and show() function) causing partially view of the map.
我发现通过使用 css 'display' 属性（或 jQuery hide() 和 show() 函数）在 div 上使用谷歌地图执行的任何隐藏和显示操作都会导致部分地图视图。
Instead of 'display' I use 'visibility' (hidden, visible) and everything is fine. What I expected was to show the map on a popup. However 'visibility' takes space even when its attribute is set to hidden, but since I use 'z-index' for the popup it does not affect a base layer (0 z-index).
我使用“可见性”（隐藏、可见）代替“显示”，一切都很好。我期望的是在弹出窗口中显示地图。然而，“可见性”即使在其属性设置为隐藏时也会占用空间，但由于我对弹出窗口使用“z-index”，因此它不会影响基础层（0 z-index）。
Regards Bronek
问候布罗内克
回答by Milan
I found a simple solution for the partially loaded google map. Usually it is caused by the onLoad() being called at times when the rest of the page (including your map element) is not completely loaded. This causes partial map load. A simple way around this issue is to change your onLoad body tag action as follows:
我为部分加载的谷歌地图找到了一个简单的解决方案。通常它是由在页面的其余部分（包括您的地图元素）未完全加载时调用 onLoad() 引起的。这会导致部分地图加载。解决此问题的一个简单方法是更改您的 onLoad 正文标记操作，如下所示：
old: onload="initialize()"
new: onLoad="setTimeout('initialize()', 2000);"
this waits 2 sec. before the Google JavaScript accesses the correct size attributes. Hope this helps :)
这等待 2 秒。在 Google JavaScript 访问正确的大小属性之前。希望这可以帮助 ：）
BTW, this is my top Javascipt part in case you wandering ( exactly as described in Google Documentation but because I am calling the Latitude and Longitude from PHP variables, hence the PHP snippets :)
顺便说一句，这是我最重要的 Javascipt 部分，以防您四处游荡（完全按照 Google 文档中的描述，但因为我从 PHP 变量中调用纬度和经度，因此是 PHP 片段:)
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>);
var marker = new google.maps.Marker({
position:point,
map:map })
} </script>
回答by Rolando
Call to Initialize() on pagebeforeshow event and try this
在 pagebeforeshow 事件上调用 Initialize() 并尝试这个
jQuery(document).delegate( "#page-map", "pageshow", function(event){
google.maps.event.trigger(map, "resize");
});
回答by Argiropoulos Stavros
Try google.maps.event.trigger(map, "resize");
试试 google.maps.event.trigger(map, "resize");
回答by Vishwanath
回答by ishan shah
Opening console doesn't re-executes any JS! The page size gets changed by it, Google map API then fires 'resize' event and loads the map again.
打开控制台不会重新执行任何 JS！页面大小被它改变，谷歌地图 API 然后触发 'resize' 事件并再次加载地图。
I faced the same issue when setting the map centre manually. I solved it by the below code:
手动设置地图中心时，我遇到了同样的问题。我通过以下代码解决了它：
google.maps.event.trigger(map, "center_changed");
