Google地图仅部分显示

Joc*_*ung 14 javascript google-maps

我所拥有的谷歌地图只是部分渲染,并且以错误的点为中心(它应该以标记为中心).见下文:

替代文字

现在添加更多细节:

  • 它在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}
Run Code Online (Sandbox Code Playgroud)

这是我把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>
Run Code Online (Sandbox Code Playgroud)

在div上,以下CSS规则适用:

替代文字

Joc*_*ung 12

发现了这个问题.我正在隐藏块,GMaps在

<div id="step2" style="display:none">
Run Code Online (Sandbox Code Playgroud)

但是当GMaps加载时,似乎可能不会隐藏包含地图的块.

所以我改变了这个

<div id="step2">
Run Code Online (Sandbox Code Playgroud)

一切正常.但是,由于我只想在开始时显示"step1",我会做一个

$('#step2').hide();
Run Code Online (Sandbox Code Playgroud)

加载地图后.

这真的是Chrome和FF的奇怪行为,但我很高兴它可以解决这个问题.谢谢你的帮助.


Bro*_*nek 6

我发现使用css'display'属性(或jQuery hide()和show()函数)通过​​google map在div上执行的任何隐藏和显示操作都会导致部分地查看地图.

而不是'显示'我使用'可见性'(隐藏,可见),一切都很好.我期望的是在弹出窗口上显示地图.然而,即使将其属性设置为隐藏,"可见性"也占用空间,但由于我对弹出窗口使用"z-index",因此它不会影响基础层(0 z-index).

关心Bronek