Javascript 谷歌地图只显示了部分内容

我看到的谷歌地图只渲染了一部分，并且居中到了错误的点（它应该居中到标记）。见下文：

现在要添加更多细节：

• 它在IE中运行良好
• 在FF和Chrome的屏幕截图中看起来很像
• 在Chrome中，只要我打开开发者控制台，ist就会工作

特别是最后一点是我最想知道的。我猜打开开发者控制台会重新执行一些JavaScript

那么：我可以像开发人员控制台那样调用函数来重新执行JavaScript吗

代码如下：

<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}

{literal}
函数初始化（）{
if（GBrowserIsCompatible（））{
var map=newgmap2（document.getElementById（“map”）；/，{size:{width:600，height:600}}
addControl（新的GLargeMapControl3D（））；
addControl（新的GMapTypeControl（））；
addControl（新的GScaleControl（））；
赛特中心地图（新格拉特林（51.17689812200107，9.84375），5）；
map.checkResize（）；
var geocoder=new GClientGeocoder（）；
功能显示点（横向、纵向）{
如果（纬度和经度）{
var点=新玻璃（lat，lon）；
地图设置中心（点，10）；
var marker=新的GMarker（点，{draggable:true}）；
addListener（标记“dragstart”，函数（）{
//map.closeInfoWindow（）；
});
addListener（标记“dragend”，函数（）{
var newPoint=marker.getLatLng（）；
$（'#lat'）.val（newPoint.lat（））；
$（'#lon'）.val（newPoint.lng（））；
//marker.openInfoWindowHtml（“Neue koordinaen Lat:+newPoint.Lat（）+”Lon:+newPoint.lng（））；
});
添加覆盖图（标记）；
}
}
{/literal}showPoint（{$gmap_lat}，“{$gmap_lon}”）；{literal}
}
}
{/literal}

这是我放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>

卡丁车

辛维斯：在Ihrem浏览器JavaScript-aktivieren中，他死了
在索尔特郡之前，标记物上的瀑布不属于富裕的位置，因此，在富裕的位置上，标记物上的瀑布不属于富裕的位置。

朗热：
布雷特：

在div上，以下CSS规则适用：

这可能有助于

---

找到了问题。我把街区藏起来了，GMAP在里面

<div id="step2" style="display:none">

一旦地图被载入

---

Chrome和FF的行为真的很奇怪，但我很高兴它能与此解决方案配合使用。谢谢你的帮助。

试试google.maps.event.trigger（映射，“调整大小”）

我发现，使用css“display”属性（或jQuery hide（）和show（）函数）在google map的div上执行的任何隐藏和显示操作都会导致地图的部分视图

我用“可见性”（隐藏，可见）代替“显示”，一切都很好。我所期望的是在弹出窗口上显示地图。然而，“可见性”即使在其属性设置为“隐藏”时也会占用空间，但由于我在弹出窗口中使用了“z-index”，因此它不会影响基本层（0 z-index）

问候

---

Bronek

我为部分加载的google地图找到了一个简单的解决方案。通常这是由于在页面的其余部分（包括map元素）未完全加载时调用onLoad（）引起的。这会导致部分贴图加载。解决此问题的一个简单方法是按如下方式更改onLoad body标记操作：

old: onload="initialize()"


new: onLoad="setTimeout('initialize()', 2000);"

等待2秒。在Google JavaScript访问正确的大小属性之前。 希望这有帮助：）

顺便说一句，这是我最重要的Javascipt部分，以防您漫游（与Google文档中描述的完全相同，但因为我从PHP变量调用纬度和经度，因此PHP代码段：）

函数初始化（）{
变量myOptions={
中心：新google.maps.LatLng（，），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
var point=newgoogle.maps.LatLng（，）；
var marker=new google.maps.marker({
位置:点,，
map:map}）
} 

在pagebeforeshow事件上调用Initialize（），然后重试此操作

jQuery(document).delegate( "#page-map", "pageshow", function(event){
google.maps.event.trigger(map, "resize");
});

---

打开控制台不会重新执行任何JS！页面大小会随之改变，谷歌地图API会触发“调整大小”事件并再次加载地图

我在手动设置地图中心时遇到了同样的问题。我用下面的代码解决了这个问题：

google.maps.event.trigger(map, "center_changed");

---

一些代码和/或实例将非常有用听起来像是CSS问题-Google Maps使用了大量CSS来给人留下地图浮动的印象。这是一个看起来像正方形的图像的移动（转到地图，右键单击并执行“查看图像”，移动的大小就像一个图像的大小）。@Pekka：我只是把代码放在那里，sry。嗯，我在地图中注入了破损的（不可地理编码或地理上不可能的）标记时遇到过这样的情况，但这里的情况似乎并非如此。如果暂时停用所有样式表，会发生什么？那么根本就没有地图。它被折叠在野外设置中，不够高。试过了，但没有帮助。但我找到了一个解决办法：看看我的答案。但正如我所读到的，这是为了解决一些人的类似问题+1这对我来说很有效-我在显示：无和显示：块之间进行了更改，并且地图加载不正确。将其更改为可见性：隐藏和可见性：可见使其工作！谢谢，布朗克，

<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>

jQuery(document).delegate( "#page-map", "pageshow", function(event){
google.maps.event.trigger(map, "resize");
});

google.maps.event.trigger(map, "center_changed");