Google地图只显示部分内容 [英] Google Map shows only partially

问题描述

我拥有的Google地图只是部分呈现，并且集中到了错误的地方（它应该以标记为中心）。见下面：

现在添加一些细节：

• 它在IE中正常工作


• 它看起来像FF和Chrome中的屏幕截图。


• 在我打开开发人员控制台

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

所以：我可以调用一个函数来重新执行JavaScript，这是开发者控制台的方式吗？

这是代码：

 < script type =text / javascript > 
 {literal} 
函数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（）; 
 $ b $函数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）; 
 
 $ b {/ literal} showPoint（{$ gmap_lat}，{$ gmap_lon}）; {literal} 
} 
} 
 {/ literal} 
  

这是我放div的地方：

 < fieldset style = -  moz-border-radius：1em; -webkit-border-radius：1em;> 
< legend> Karte< / legend> 
< div id =maptitle =Lage von'{$ name}'>< br> Die Karte wird geladen ...< br>< br> Hinweis：Damit dies funktioniert MüssenSie in Ihrem Browser JavaScript aktivieren< / div> 
瀑布标记标记位置标记位置标记，bewegen Sie diesen mit Ihrer Maus auf die richtige位置。 
< br>Länge：< input type =textid =latname =latvalue ={$ gmap_lat}> 
 Breite：< input type =textid =lonname =lonvalue ={$ gmap_lon}> 
< / fieldset> 
  

并且在div上适用以下CSS规则：

解决方案

发现问题。 GMaps是在

 < div id =step2style =display：none> 
  

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

所以我改变了它的样子

 < div id =step2> ; 
  

并且一切正常。但是，因为我只是想在开始时显示step1，所以我做了一个

  $（'＃step2'）。 （）; 
  

一旦地图加载完成。

这是Chrome和FF的奇怪行为，但我很高兴它可以与此解决方案配合使用。感谢您的帮助。

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

Especially the last point is the one I'm wondering most about. I guess opening the developer console re-executes some JavaScript.

So: Can I call a function to re-execute JavaScript, the way the developer console does?

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:

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

解决方案

Found the issue. I was hiding the block, GMaps was in

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

But it seems a block containing the map may not be hidden, when GMaps loads.

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

$('#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.

这篇关于Google地图只显示部分内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！