Question

我所拥有的谷歌地图只是部分渲染，并且以错误的点为中心（它应该以标记为中心）。见下文：

alt text

现在再添加一些细节：

在IE中工作正常
看起来像在FF和Chrome的屏幕截图中。
在我打开开发者控制台

特别是最后一点是我最想知道的那一点。我想打开开发者控制台会重新执行一些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}

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

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

alt text

Answer 1

发现了这个问题。我正在隐藏块，GMaps在

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

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

所以我改变了这个

<div id="step2">

一切正常。但是，由于我只想在开始时显示“step1”，我会做一个

$('#step2').hide();

加载地图后。

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

Answer 2

我发现通过使用css'display'属性（或jQuery hide（）和show（）函数）在谷歌地图上对div执行的任何隐藏和显示操作都会导致部分地图视图。

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

此致布罗尼斯瓦夫

Answer 3

这可能会有所帮助......

Google Maps not rendering completely on page?

Answer 4

尝试google.maps.event.trigger（map，“resize”）;

Answer 5

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

old: onload="initialize()"


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

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

顺便说一下，这是我最好的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>

Answer 6

在pagebeforeshow事件上调用Initialize（）并尝试此

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

Answer 7

打开控制台不会重新执行任何JS！页面大小由此改变，Google map API然后触发“ resize”事件并再次加载地图。

手动设置地图中心时，我遇到了同样的问题。我通过以下代码解决了该问题：

from lxml import etree as ET

def parse_xml(file_name, tag_name):
    for event, element in ET.iterparse(file_name, tag = tag_name):
        if (element.xpath('field2/text()')):
            yield (element.find('field1').text, element.find('field2').text)

result = [tuple for tuple in parse_xml('input-file.xml', 'element')]

print(result)

Google地图仅部分显示

7 个答案: