css - Screenoverlay 在 Firefox/Chrome 中的谷歌地图中被抵消

Question

如果我没有给定记录的位置数据，我会生成一些 KML，该 KML 会生成带有错误消息的屏幕叠加层。当它工作时，它看起来像这样:

在 firefox 和 chrome 中的一个(一致的场景)中，它改为这样做:

这个页面与另一个在 Firefox 和 Chrome 中都有效的页面之间的区别在于， map 容器 div 位于它不工作的页面的左侧(使用 position: absolute;) 并设置为:float: right; 在有效的页面上。

放置此图像的 KML 相关部分是:

<ScreenOverlay>
  <Icon>
    <href>http://SomeURL.com/image.png</href>
  </Icon>
  <overlayXY x="0.5" xunits="fraction" y="0.5" yunits="fraction" />
  <screenXY x="0.5" xunits="fraction" y="0.5" yunits="fraction" />
  <size x="0" xunits="pixels" y="0" yunits="pixels" />
</ScreenOverlay>

谷歌地图设置/初始化:

function initialize() {
    var latlng = new google.maps.LatLng(64, -117);
    var settings = {
        zoom: 4,
        maxZoom: 10,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        navigationControl: true,
        navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("MapCanvas"), settings);
    var geoLayer = new google.maps.KmlLayer('@Model.KMLURL');
    geoLayer.setMap(map);
}

页面上的 div:

div#MapCanvas {
 float: right;
 border: 2px solid #666666;
 width: 400px;
 height: 300px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

div#MapContainer {
 float: right;
 width: 400px;
 height: 300px;
 margin-bottom: 10px;
}

div 在它不起作用的页面上:

div#MapCanvas {
 border: 2px solid #666666;
 width: 400px;
 height: 300px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

div#MapContainer {
 position: absolute;
 top: 0;
 left: 0;
 width: 400px;
 height: 300px;
 padding: 5px;
}

我最好的猜测是这与页面加载时 div 的移动方式有关，这在某种程度上与图像的位置相互作用。我尝试了以下方法:

1. CSS 中的替代放置代码，所以没有效果，即使它把 map 移到别处，图像在这个页面上仍然偏移 - 让我觉得我可能偏离轨道了。
2. 加载页面后，使用 javascript 调用手动卸载和重新加载 KML 图层。

Answer 1

终于找到了有问题的 CSS 设置:包裹 map 容器的 div 有这个设置:

text-align: center;

这显然会使屏幕覆盖相对于整个屏幕居中。如果有人对 CSS 与屏幕叠加层交互的原因有任何解释，我很想知道。希望这对其他人有帮助。

我在 MapCanvas div 的 CSS 上设置了 text-align: initial; 来纠正这个问题。